Question 53878 in Javascript Question posted in
A very good W3school tutorial can be found here.

Why my useEffect (ComponentDidMount) lifecycle triggers twice? – Javascript

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;
Tags:

3

Answers


  1. 0

    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');
  }, []);
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search