“Hooks let us build components with less effort, and create better user experiences.” — Dan Abramov
Hooks are a relatively new addition in React 16.8, released in February 2019. Hooks let you “hook into” React features from components. They enable one to use state and other such features without having to write a class. Hooks are also backwards-compatible, meaning they are interoperable with older versions of React.
The State Hook
The State Hook is imported as {useState} from React in a given component. “useState” returns two values, a variable with a current state value, and a function that can be called upon to update said variable. This is what is happening when we declare const [count, setCount] = useState(0). The square brackets used to declare the value is an instance of “array destructuring” in which we’re creating two variable values. We call useState directly in our function component, and set a variable with a “default” value as seen below.
When calling state and declaring a state variable, a value is preserved between function calls, whereas “normal” variable values will disappear. The argument passed to useState is the initial value of the state variable — where we want to start. It can be “0,” an empty string “”, an empty array [], or even simply “null”.
React will remember the current value of a state variable even between re-renders! It will provide the most up-to-date value of the state variable to a function once it is invoked.
In the example above, the variable “count” has a state value of 0. If we want to update the current value of “count” we do so by calling “setCount.” When the button is clicked in the above example, “count” gets set to the value of “count” + 1. So each time the “Click Me” button is pressed, the value of “count” will essentially increment upward by one.
The Effect Hook
The Effect Hook lets you perform side effects like data fetching or manually updating the DOM within components. The Effect Hook runs after the first render, each DOM update, and after every completed render by default. You can also specify to run them only when particular values have changed.
When using the Effect Hook, you’re insisting that your component do something after the render. Effect
Here, we import {useEffect} when we import the State Hook. We fetch some data within the useEffect function, parse the response as JSON and use a state variable “toys” set to an empty array, and its function “setToys” to create an array of objects from our fetch request. Then we can render this information on the page. Here, the effect runs each time the DOM changes and the DOM changes each time the toy array is changed or updated.
Further Reading - React Router
React Router is a routing library that includes other specific hooks, like useHistory, useLocation, and useParams. meant to keep the User Interface in sync with the URL in a given App. When used in concert with the Router, these hooks can create dynamic means of location transition URL navigation.
After installing the React Router, and importing {BrowserRouter} from “react-router-dom,” the entire App Component must be wrapped with a <BrowserRouter> tag in the index.js file.
The History Hook
An example of a React Router-specific hook, is the History Hook which provides access to the history of an instance, when imported from React Router. It can navigate a user to different URL pathways.
First, you must import {useHistory} from React Router
You can then set a variable to the useHistory hook function and invoke it.
Now you can call history in your code in order to manipulate a user’s navigation to different URL pathways.
In the example above, once this delete method is triggered, a user will be “pushed” back to the “profile” path, as defined in the Router Components.
