useState and useEffect hook. What are hooks and how do we use useState and useEffect hook?
Table of contents
Why we should use hooks?
Hooks are a way to manage state logic in functional components. They allow you to reuse stateful logic between components and can make it easier to test components.
Some benefits of using hooks:
With hooks, you can use functional components instead of class-based components which can make your code easier to read.
You can make your own custom hooks by using their in-built hooks.
Class-based components can cause sometimes performance issues because they require the component to be re-rendered when the component's state or props change. Hooks can avoid these performance issues because they allow you to split your component into smaller functions. This can help prevent unnecessary re-renders.
Hooks make it easier to understand the flow of state in a component.
useState hook
useState is a hook in React that allows you to add and update the state to the functional components. It is a way to manage the state in functional components, which were previously only able to use state in class-based components.
To use useState
, you need to import it from the React library and then call it inside your component. The useState
hook takes an initial value as an argument and returns an array with two elements: The current state value and a function to update that value.
Here is an example of how to use the useState
hook to add a counter to a functional component:
This method is called array destructuring. It allows you to extract values from an array and assign them to variables respectively. count
is the current state value and setCount
is a function to update the value.
Now let's get back to the above example, in that example the count
state variable is initialized to 0
, and the setCount
function is used to update the value of count
when the button is clicked. The count
value is displayed in the component, and the component will re-render every time the value of count
changes.
It is generally recommended to not modify the state object directly in a React component when using the useState
hook. This is because the useState
hook relies on the state object being immutable, meaning that you should not modify the object directly but instead create a new object with the updated values. so, to change the state correctly in a functional component using the useState
hook, you should use the update function that is returned from the hook.
useEffect hook
useEffect
is a hook in React that allows us to perform side effects in functional components such as, Fetching data from an API and updating the component's state with the response, Adding or removing an event listener, or some timing functions like setTimeout
or setInterval
.
Here is an example of how you might use useEffect to fetch data from an API and update the component's state:
Now you must be thinking what the hell is all this, don't worry let's break it down in small parts and understand this.
So at first, we imported useState
and useEffect
from react and made a state where we can save our data. We call the useEffect
hook, which takes two arguments, first is a callback function that will be called after the component renders, and the second is an array which is also called a dependency array.
After successfully fetching data we update the data state using setData
to the data which we are getting as a response from the API.
Now the second argument is an optional array of dependencies. If you include this array, the effect will only run if one of the dependencies changes.
What is a cleanup function in useEffect hook?
A cleanup function is a function that is returned from the effect function and is called when the component unmounts or the effect function re-runs. The cleanup function can be used to perform cleanup tasks. For example: if you have a timer using the setInterval
function. that timer interval will not stop until we use the clearInterval
function.
Here is an example of a cleanup function:
In the example above, the useEffect
is used to set up an interval that increments the seconds
state variable every second. The effect function returns a cleanup function that clears the interval when the component unmounts. This ensures that the interval is not still running after the component has been removed from the DOM.
The effect function is only called once (on mount and unmount) because the second argument in useEffect
is an empty array. This means the effect will not run on multiple re-renders.
That's all for now, read more about hooks here:
https://beta.reactjs.org/reference/react
Reach me on Twitter