ReactJS — useEffect & useCallback Simplified

In case you never heard about useCallback and useEffect, I strongly recommend that you check the official docs listed below

• React in general: https://reactjs.org/docs/getting-started.html

• useEffect(): https://reactjs.org/docs/hooks-reference.html#useeffect

• useCallback(): https://reactjs.org/docs/hooks-reference.html#usecallback

In Summary:

UseEffect

useEffect is a React Hook which allows you to handle side effects in your functional React components.

You can use it to do anything that doesn’t directly impact your UI/ JSX code (it might eventually affect it, for example, if you’re fetching data from some server, but for the current render cycle, it will not.

useEffect allows you to register a function which executes AFTER the current render cycle

useEffect runs after every render cycle (i.e. whenever your functional component re-runs/ re-renders), unless you pass a second argument to an array of dependencies of the effect.

With such a dependency array provided, useEffect() will only re-run the function you passed as a first argument, whenever one of the dependencies changed.

useCallback

useCallback often is used in conjunction with useEffect because it allows you to prevent the re-creation of a function. For this, it's important to understand that functions are just objects in JavaScript.

Therefore, if you have a function (A) inside of a function (B), the inner function (=A) will be recreated (i.e. a brand-new object is created) whenever the outer function (B) runs.

That means that in a functional component, any function you define inside of it is re-created whenever the component rebuilds

Typically, it’s not a problem, that innerFunction is re-created for every render cycle.

But it becomes a problem if innerFunction is a dependency of useEffect():

Why is the above code problematic?

The effect re-runs whenever innerFunction changes. As stated, it is re-created whenever MyComponent re-builds

Because functions are objects and objects are reference types, that means that the effect will re-run for every render cycle

That might still not be a huge problem, but it is if innerFunction does something that causes MyComponent to re-build (i.e. if it either does something that changes the props or the state).

Now, you would have an infinite loop!

useCallback() helps you prevent this.

Hence the function is NOT re-built on every render cycle anymore => You break out of the infinite loop!