I have my app inside a Strict Mode and it makes it difficult to run with my useEffect(). It basically logs all my values twice in the console which is not the result I want to achieve.

 useEffect(() => {
console.log('logs some data')
}, []);

It there a way to make useEffect only show the data once and keep the StrictMode inside my app ponent?

root.render(
<React.StrictMode>
 <App />
</React.StrictMode>
);

I did try using the useRef method but I was advised by my staff to not use this specific method and try another possible outwork.

---

Solution: If you ever need to keep Strict Mode in your ponent but need to make your useEffect no render twice, you could use useRef :

Example:

 let shouldlog = useRef(true);

 useEffect(() => {
 if (shouldlog.current) {
  shouldlog.current = false;
  console.log("ponent mounted");
  }

return () => console.log("function cleaned up");
}, []);

I have my app inside a Strict Mode and it makes it difficult to run with my useEffect(). It basically logs all my values twice in the console which is not the result I want to achieve.

 useEffect(() => {
console.log('logs some data')
}, []);

It there a way to make useEffect only show the data once and keep the StrictMode inside my app ponent?

root.render(
<React.StrictMode>
 <App />
</React.StrictMode>
);

I did try using the useRef method but I was advised by my staff to not use this specific method and try another possible outwork.

---

Solution: If you ever need to keep Strict Mode in your ponent but need to make your useEffect no render twice, you could use useRef :

Example:

 let shouldlog = useRef(true);

 useEffect(() => {
 if (shouldlog.current) {
  shouldlog.current = false;
  console.log("ponent mounted");
  }

return () => console.log("function cleaned up");
}, []);

• javascript
• reactjs
• react-hooks
• react-strictmode

Share Follow edited Jul 15, 2023 at 14:29 Bergi 667k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Jul 20, 2022 at 9:35 Metgher AndreiMetgher Andrei 21733 silver badges1313 bronze badges 2

• 1 no you can't: beta.reactjs/learn/…, but you can use ref approach if none of the scenarios work for you in that link – gmoniava Commented Jul 20, 2022 at 9:49
• The double rendering (or render - unmount - render) is there to help people spot problems in their useEffects. But it's not doing this in production mode. My guess is that the React team wants to prepare people for future versions of React, where abusing useEffect will cause problems – Gøran Cantona Commented Jul 20, 2022 at 10:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

We have to understand the concept of Strict mode first then only we will react the solution

<StrictMode> helps find mon bugs in your ponents early during development.

Reference

Strict Mode enables the following development-only behaviors:

1. Your ponents will re-render an extra time to find bugs caused by impure rendering.
2. Your ponents will re-run Effects an extra time to find bugs caused by missing Effect cleanup.
3. Your ponents will be checked for usage of deprecated APIs.

So basically is used to find the mon errors or bugs during the development to build a quality React app

You can take advantage of the cleanup function to cancel the redundant work, for example using a 0 timeout:

  useEffect(() => {
    const timeout = setTimeout(() => {
        console.log('one console log ' + new Date().valueOf(); 
    }, 0);
    
    return () => {
        clearTimeout(timeout);
    }
  }, []);

The life cycle looks roughly: create ponent, immediately destroy it, create it again. And with effect: run effect, immediately run its cleanup function, run it again.