useState and useEffect hook. What are hooks and how do we use useState and useEffect hook?

useState and useEffect hook. What are hooks and how do we use useState and useEffect hook?

·

4 min read

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 useEffectis 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