As we all know, The useEffect hook is called after the screen is rendered. A flickering effect will occur if the client notices the mutation. Alternatively, We can emulate the componentDidMount lifecycle function by using the useEffect Hook and providing a callback code.

So, what kind of changes are we going to talk about now?

When a component mounts in Strict mode, react developers have altered how useEffect behaves.

Take a peek at the Strict mode.

With React 16.3, strict mode was added as a tool for detecting code patterns that might cause problems with React’s (then experimental) concurrent rendering APIs. There is no apparent UI when is applied to a React component like Fragment.It causes additional tests and warnings to be performed on its offspring.

Is strict mode supported by React?

The React StrictMode component may be thought of as an utility component that helps developers to code more quickly and alerts them to any questionable code that has been mistakenly added to the application.

The React application applies extra behavior to all of the components it wraps around (only in DEV mode). For example, when executed in “strictmode,” React will purposefully double-render components to flush out any dangerous side effects.

Because of the most recent version, several amazing new modifications have occurred.

StrictMode gains an extra feature with the introduction of React 18 to ensure compatibility with the reusable state. When StrictMode is enabled, React purposefully double-invokes effects for newly mounted components (mount -> unmount -> mount). React, like other strict mode behaviors, will only perform this for development TS.

What changes have been made to useEffect?

You’ll need to change your code now that useEffect is called twice during mount. No changes are necessary if the useEffect has dependents. If you’re using useEffect for an on-mount effect, you’ll need to use the useRef hook.

For instance:

const runOnce = useRef(false);
useEffect(() => {
if (runOnce.current === false){
runOnce.current = true;
SomeApI.fetchData();
}
}, []);

If you’re using useEffect for unmount cleaning, you should be alright if the setup function is included within the same useEffect.

useEffect(() => {
const request = someAPIRequest();
return () => {
request.cancle();
};
},[]);

Effects fire twice in React 18’s Strict Mode, which simulates unmounting and remounting the component in development mode. Each component is mounted, then unmounted, and lastly re-mounted.

There’s a reason React introduced reusable state.

The React team is working on a new offscreen feature that will let us enable things like tabbed containers and virtualized lists, as well as take use of new browser APIs like content-visibility. The component may be attached and unmounted multiple times to do this.

Disabling strictMode

If your app’s double invoking effects are creating serious problems, you can disable StrictMode until you can fix them.

There is currently no way to keep the old behaviour - enabling it will cause duplicate invoking effects.

Before we wrap up…

Thank you for sticking with me this far! Let’s get together. You may remark on my Linkdin profile.

That’s all I’ve got for now. Soon, I’ll be back with my next piece. Please take care of yourself till then.