React does useState by default call function without parenthesis

I have a function named getAllEmployees which I export from another file.

const getAllEmployees = () => {
    return [1,2,3,4,5,6,7,8,9]
}

export { getAllEmployees }

now I use React.useState(getAllEmployees). this gives me the result, when I call like React.useState(getAllEmployees()) it also gives me same result, event when call like React.useState(() => getAllEmployees()) this also gives me the same result.

import here

import { getAllEmployees } from './Service/Service'

use with useState

const [result] = useState(getAllEmployees ) or
const [result] = useState(getAllEmployees()) or
const [result] = useState(() => getAllEmployees())

console.log(result)

for all of those result is

 (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

My question is why they gives me same results, and which is the right way?

5 thoughts on “React does useState by default call function without parenthesis”

  1. Why they gives me same results?

    1. const [result] = useState(getAllEmployees)

      React useState hook can take a lazy initializer function, to be invoked when the component is mounting and state is being initialized. You are passing a callback for React to call and initialize state with the return value.

    2. const [result] = useState(getAllEmployees())

      This is simply immediately invoking the function and passing the return value to the hook to be the initial state.

    3. const [result] = useState(() => getAllEmployees())

      This is the same as 1, but you’ve passed an anonymous initializing function.

    Which is the right way?

    The right way is the one that works for your use case, is easy to read and understand, and maintain. 1 or 2 are ok, 1 if it is clear that getAllEmployees is a function and 2 if it is not. 3 is unnecessary.

    Reply

Leave a Comment