function without () in useState (react hook)

Question

When I pass function parameter to useState() like this:

const [testA, setTestA] = useState(returnTestA());  // run every rendering
const [testB, setTestB] = useState(returnTestB); // run only mount

• function with () is run every rendering
• but function without () is run only first rendering(mount)

It is my whole code: (info.js)

import React, { useState } from "react";

let count = 0;

const returnTestA = () => {
  count++;
  console.log("test A: " + count);
  return "test";
};

const returnTestB = () => {
  count++;
  console.log("test B: " + count);
  return "test";
};

const Info = () => {
  const [name, setName] = useState("");
  const [testA, setTestA] = useState(returnTestA());  // run every rendering
  const [testB, setTestB] = useState(returnTestB); // run only mount

  const onChangeName = e => {
    setName(e.target.value);
  };

  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChangeName} />
      </div>
      <div>
        <div>
          <b>Name:</b> {name}
        </div>
      </div>
    </div>
  );
};

export default Info;

the result is:

1. just npm start:

2. type something in input:

Why It happened?? And what is the best practice?

Answer 1

See the official explanation here: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

const [testB, setTestB] = useState(returnTestB);

It is similar with:

const [testB, setTestB] = useState(() => returnTestB());

You pass a function to the useState() method as the parameter, this function will only run once when mount.

But for

const [testA, setTestA] = useState(returnTestA());

You pass a computed object to useState() as the parameter, this object will be computed every time when rendering.

Answer 2

it does not about react it's about JavaScript

here is some example

test.js
const testFunc = () => console.log('1');

if we define testFunc and load test.js that doesn't mean trigger testFunc

also we can pass testFunc as parameter it's called first class citizen(object)

now let's dive to your code

 const [testA, setTestA] = useState(returnTestA());  // run every rendering
  const [testB, setTestB] = useState(returnTestB)

1. useState(returnTestA()).
returnTestA() mean is trigger(call) returnTestA and pass result of returnTeatA function into useState

pass value

2. useState(useState(returnTestB)).
returnTestB mean is pass function without trigger into useState.
perhaps useState call that

pass function

you wanna know more deatil about first class citizen(object)
this link must helps you about What are "first class" objects?

Answer 3

returnTestA() calls the function.

returnTestA return its value.

let a = function() {
    return 'test';
};

so when you write a() it calls the function and return its value while a simply means 'test'.