State variable is changing when accessed from useEffect()-CodePudding

I am declaring a new variable called name and initializing it with useState to Math.Random() I then log the variable in 2 places, once in the body of the component, and once in the useEfect of the component. What I'm seeing is that the variable is changing.

My name is 0.1869175357793944 here My name is 0.10608469707774937 after render

Am I doing something wrong here? I cannot figure out why it's behaving like this.

Here is my code:

const {useState} = React;
const {useEffect} = React;

const Example = () => {
  const [name, setName] = useState(Math.random());
  console.log(`My name is ${name} here`);

  useEffect(() => {
    console.log(`My name is ${name} after render`);
  }, [])

  return (
    <div>Look at console</div>
  );
};

// Render it
ReactDOM.render(
  <React.StrictMode>
  <Example/>
  </React.StrictMode>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
<div id="react"></div>

CodePudding user response：

I believe the problem is that you are assigning name a value of the Math.random function instead of the result of Math.random().

Try this:

const [name, setName] = useState(Math.random());

CodePudding user response：

I don't sure but it may work for you

const {useState} = React;
const {useEffect} = React;
const number=Math.random()
const Example = () => {
  const [name, setName] = useState(number);
  console.log(`My name is ${name} here`);

  useEffect(() => {
    console.log(`My name is ${name} after render`);
  }, [])

  return (
    <div>Look at console</div>
  );
};

// Render it
ReactDOM.render(
  <React.StrictMode>
  <Example/>
  </React.StrictMode>,
  document.getElementById("react")
);

CodePudding user response：

What you are seeing is an unintentional side-effect from the console.log in the component body. When you render your app inside a React.StrictMode component some functions are double-invoked to help you detect these unexpected side-effects.

const Example = () => {
  const [name, setName] = useState(Math.random());
  console.log(`My name is ${name} here`); // <-- unexpected side effect!!

  useEffect(() => {
    console.log(`My name is ${name} after render`);
  }, [])

  return (
    <div>Look at console</div>
  );
};

My name is 0.859128653421811 here 
My name is 0.6861295664325067 here 
My name is 0.6861295664325067 after render

CodePudding user response：

Actually, this behavior will only happen in the development mode, not in production. In production, it will show a single value.

Reason: React applications are wrapped with <React.StrictMode /> component.

In short, strict mode help to cache any issue that occurs during development.

Note: Strict mode checks are run in development mode only; they do not impact the production build. https://reactjs.org/docs/strict-mode.html

Just for testing, try to remove <React.StrictMode>...</React.StrictMode>. Your problem will not exist anymore in the development mode as well.

 ReactDOM.render(
  <Example/>
  document.getElementById("react")
);