React Hooks UseEffect

useEffect() - the hook that manages side-effects in functional React components. The most common Side-Effects are, fetch requests, manipulating DOM, or using subscriber functions.

We can’t control how often a React component can render; however, we can use the side-effects technique to improve the performance and perform the heavy task only when needed. Below is an example where we have a mix of component rendering and side effects. Each time a component renders, we update the browser title even if the property name did not change.

Side Effect Mixing

 Thanks to useEffect() — the hook that runs side-effects independently of rendering, we will be able to decouple rendering from side-effects. 

Side Effect No Dependency

useEffect() hook accepts 2 properties .

> useEffect( callback[, dependencies]);

the callback is the function containing the side-effect logic. The callback is executed right after changes are being pushed to DOM.

dependency is an optional array of dependencies. useEffect (0 executes callback only if dependencies have changed between renderings.

Control Side Effect / Dependencies argument

Put your side-effect logic into the _callback_ function, then use the _dependencies_ the argument to control when you want the side-effect to run.

No dependencies provided: Side-effects will run every single rendering.

Side Effect No Dependency

An empty Array,[]: the side-effect runs once after initial rendering.

Side Effect Empty Array

Has props or state values: the side-effect runs only when any dependency value changes.

Side Affect Array with State

Clean up Previous Side Effect

Some Side-Effect needs a clean-up: subscriber event needs an unsubscribe function. 

If the callback of useEffect(callback, deps) returns a function, then useEffect() considers this as an effect cleanup:

Consider the example below where I added the event lister to capture when windows resize and update the DOM. If there is no clean-up each time that component is mounted, it will keep adding event listeners, negatively affecting our application's performance.

The first time the component is the mount, it will add an event, but the second time, it will run the clean-up function, which will remove the event before adding it again. 

use Effect Cleanup

For further explanation about React Hooks, reach out to Xcentium Support.