Hooks are a new addition in React 16.8. They let you use state and other react features without writing a class.
Before the release of Hooks, React Components were divided in two categories depending on whether the component was class-based or function-based.
What is a Hook?
A Hook is a special function that lets you “hook into” React features.
When would I use a Hook?
If you have a function component and you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.
Basic React Hooks
There are many hooks in React but I will talk about the most basic ones: useState , useEffect and useContext
useState
const [state, setState] = useState(initialState);In this variable, state and setState refer to the state value and updater function returned on invoking useState with some initialState.
Note that when the component first renders and invokes useState, the initialState is the returned state from useState
Also, to update state, the state updater function setState should be invoked with a new state value (setState(newValue)). A new re-render of the component is queued. useState guarantees that the state value will always be the most recent after applying updates.
Example:
In this example, we start importing the useState Hook from React. In a function component, there is no this, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component.
useState in this case declares a “state variable” called “count”. It takes the initial state as an argument, which in this case is 0, the number of times that the user clicked.
It returns a pair of values: the current state and a function that updates it.
Then there is what is called the reading state on line 9 where we can just write the state in curly brackets instead of using “this.state.count”.
Finally, the updating state, where we update the count state. In a function, we already have setCount and count as variables so we don’t need to write this.setState({count: this.state.count + 1 )} since we don’t need this
2. useEffect
The basic signature of useEffect is as follows:
useEffect(() => {})
useEffect accepts a function that ideally contains some imperative, possibly effectual code. By default, the useEffect callback is invoked after every completed render, but you can choose to have this callback invoked only when certain values have changed. Some imperative code needs to be cleaned up. For example, subscriptions need to be cleaned up, timers need to be invalidated, etc. You can find the documentation here.
Following the previous example, we want to implement a new functionality by having a message displaying how many times the user clicked. That is when useEffect comes in play:
Usually, in React classes, we put side effects into componentDidMount and componentDidUpdate.
By using this Hook, you tell React that your component needs to do something after render. React will remember the function passed and call it later after performing the DOM updates. Placing useEffect inside the component lets us access the count state variable (or any props) right from the effect.
3. useContext
Here’s how the useContext Hook is used:
const value = useContext(ContextObject)useContext is invoked with a context object (the result of calling React.createContext), and it returns the current value for that context.
The value returned from useContext is determined by the value prop of the nearest Provider above the calling component in the tree. A component calling useContext will be re-rendered when the context value changes.
Here is an example:
Conclusion
This is a brief introduction to Hooks in React. There are many other hooks that you can find on the official documentation. Using hooks, logic and UI are easier to separate. No need for HOC or render props. Hooks do it elegantly with less boilerplate and more intuitive compositions of UI and logic.
