What's the difference between useState(function_name), useState(function_name()), useState(()=>function_name()) and useState(()=>function_name)?

user_5733078 0
Viewed 154

The function createHiveBackground returns an array of objects that I want to assign to a state. Later in my application I'm going to use setHive to change some values of the array. What is the difference between these?

const [hive, setHive] = React.useState(createHiveBackground);
const [hive, setHive] = React.useState(createHiveBackground());
const [hive, setHive] = React.useState(()=>createHiveBackground);
const [hive, setHive] = React.useState(()=>createHiveBackground());

If I use useState(createHiveBackground) it seems to work properly.

If I use useState(createHiveBackground()) each time I change a value with setHive the function is called again.

If I use useState(()=>createHiveBackground) TypeError: hive.map is not a function (seems like the function is not being executed).

If I use React.useState(()=>createHiveBackground()); it seems to work properly.

Can some clarify what is the difference between all these options and what is the best for my case?

reactjs javascript
2 Answers

The differences are between:

  • Value type: Function/Array (Function's return type).
  • Initial type: Normal/Lazy 
// Lazy assign the return value of the function
// Both are equivalent as First-class functions (check the reference)
const [hive, setHive] = React.useState(createHiveBackground);
const [hive, setHive] = React.useState(() => createHiveBackground());

// Assign the return value from the function
const [hive, setHive] = React.useState(createHiveBackground());

// Lazy assign the function
const [hive, setHive] = React.useState(() => createHiveBackground);

References:

user_78824700

That's not even the question about react, that's simple js basics. I gonna explain on another subject, events function calls

document.addEventListener('change',(createHiveBackground));
document.addEventListener('change', (event)=>createHiveBackground(anotherParam));

The above both actions act the same, but the only difference how you coded createHiveBackground in first line your function handles by it own the incoming arguments as it would look like function createHiveBackground(event, anotherArg){} because parent function addEventListener passes event as arguments in either cases as the first argument to the mentioned function.

But in the second case you coded the function which expects oneArgument only function createHiveBackground(anotherArg){} and you avoid conflicts between addEventListener and createHiveBackground so you use function in the middle

Another your line about difference with it:

const [hive, setHive] = React.useState(createHiveBackground());

Your createHiveBackground is written like this:

function createHiveBackground() {return data}

to provide a data that React.useState waiting for. This executes your func at once. But this will not work at 

document.addEventListener('change', createHiveBackground())

because it will be executed right in 'compilation' when no event have been fired. One exception it may return another function which will be called at event firing. 

function createHiveBackground(){ return function(event, anotherParam){doSomeStuff on event}

The last example just passes a function body which may be called later ()=>createHiveBackground it will not be invoked immediately

Coming back to your question hence React.useState expects some data - you may use any of these depending on createHiveBackground function implementation (the colleague above says:

//first two similar and used at lazy call
const [hive, setHive] = React.useState(createHiveBackground);
const [hive, setHive] = React.useState(()=>createHiveBackground());

//the next must return a data to be passed to the state
const [hive, setHive] = React.useState(createHiveBackground());

//nothing will happened because the function body will be passed but not executed
//function's body will be stored at the state
const [hive, setHive] = React.useState(()=>createHiveBackground);
user_92774530
Related