What & Why are Use Effects hook?

 Explanation of the side effects in react

Earlier , what we do is bringing something directly to the web browser , user interaction to the web page and state updates whenever some input or event triggered with the button click which we what we do with useState and prop value in react.

React only cares about the render and re-render the component , this what react is all about by handling jsx code , evaluating the component and with the state and prop changes because of the user interaction.

But when we talk about handling http request , fetching data from backend servers , timers and intervals to which react doesn't care about , it doesn't render directly to the web browser even if we put http request directly to the component that in result create infinite loop eventually if we update state after fetching the response and can also lead too many http request with the rendering . So , using these side effects can create infinite loops and bugs to the react app.

Side effects in react can occur outside of the normal component since they can block the rendering cycle e.g. http requests.

So , this is the problem react is facing due to which there is also a hook in react which will care about these side effects and it will manage by the hook.

The hook that will manage the side effects in react is the useEffect hook . Whenever some action need to be taken in response to some other action is called side effects in react.

For example , with the button click , we want to fetch data from the server briefly with the response to event triggered , we will fetch the data and handling the http request .

The basic syntax of the useEffect is shown below.

useEffect((      )=>{                 },[dependencies])  

useEffect is simply a function which will be imported by the react library as a named export and the side effect code will be written in the curly braces and will only be change if one of the dependency will change , the dependency array is optional .

We can write any side effect code or function in the useEffect which will render according to the dependency list , like handling http requests , fetching some data from the servers , set timer ,interval etc. and many more side effect that can be written .

This is the most usable hook in the react and very popular for handling side effects , before 16.8 version of react , we cannot use useEffect hook as hook are introduced after the 16.8 version or higher . So, earlier we need to write three functions in class components for handling side effects which is componentDidUpdate() , componentWillUnmount() ,  componentWillMount() and useEffect is the close replacement for the three functions in react which increase the performance and reduces the line of code and complexity in react and that's because useEffect hook is more popular than these functions in react.

In the next blog we will discuss an example of useEffect so, it will create better understanding . 

Thank you for reading the blog post!