Why my useEffect (ComponentDidMount) lifecycle triggers twice?

Question

I am using @preact/signals-react to integrate my react project.

I have an issue that need a fix.

P.S I found that if I removed the import { signal } from '@preact/signals-react', thats work for me. I want to use @preact/signals-react tools.

My Environment

1. React v16.8.6
2. @preact/signals-react v1.2.2

My Code

import React, { useEffect } from 'react';
import { signal } from '@preact/signals-react';

const Scenes = (props) => {

    useEffect(() => {
        console.log('ComponentDidMount'); // Trigger Twice !!
    }, []);

    return <div>Hello</div>;
}

export default Scenes;

Answer 1

StrictMode is a development tool that renders components twice, with the purpose of detecting any issues with your code and alerting you about them. This feature is particularly useful during development.

If you are using StrictMode in your application but cannot remember explicitly enabling it, it is likely because you used a tool like create-react-app to set up your application, which automatically enables StrictMode by default.

you might find that your main app is wrapped by <React.StrictMode> in your index.js file:

ReactDOM.render(
 <React.StrictMode>
   {app}
 </React.StrictMode>,
document.getElementById('root'))

you can remove the strict mode by

ReactDOM.render(
    {app}
document.getElementById('root'));

Strict mode is not enabled in production

Answer 2

If you don't use dependency array, useEffect will run in every render. if you want to render once keep dependency array empty.

  useEffect(() => {
        console.log('ComponentDidMount');
  }, []);

Answer 3

You need to understand useEffect properly, it takes two arguments.

First one is a callback function and other one is dependency array. Whatever you put in the dependency array is the checkbox to check when to render it again.

Learn more here - https://blog.bitsrc.io/understanding-dependencies-in-useeffect-7afd4df37c96?gi=41a7917490c8