Using (Or ||) syntax inside of React useState for assignment

Question

I'm observing a new syntax I haven't seen before in the react useState hook. It's

const [thing, setThing] = useState(thing || otherThing);

I've never seen that or construction used inside of useState before. I know it is a javascript native logic operator, but I'm curious exactly how to interpret it inside the context of useState.

Does it essentially mean, "if either of these things are true, set it to thing? " Is it assuming both of them can never be true at the same time?

If `thing` is truthy, it will be used to initialize the `useState`. If it is falsy, `otherThing` will be used. — Brian Thompson, Mar 16 '20 at 16:46
https://stackoverflow.com/questions/2100758/javascript-or-variable-assignment-explanation — jean182, Mar 16 '20 at 16:52
Does this answer your question? [JavaScript OR (||) variable assignment explanation](https://stackoverflow.com/questions/2100758/javascript-or-variable-assignment-explanation) — Emile Bergeron, Mar 16 '20 at 17:00

score 3 · Accepted Answer · answered Mar 16 '20 at 16:50

Its just used as a terse syntax for declaring a fallback. If the first variable is falsy, it will fall back to the second.

Example with null first value:

const {useState} = React;

const test = null;
const fallback = 'fallback';

const Example = () => {
  const [state, setState] = useState(test || fallback);

   console.log("state: ", state); // Logs the value of fallback
   
   return <span />
}

ReactDOM.render(<Example />, document.getElementById('root'));

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

But if the first variable is truthy, it gets used:

const {useState} = React;

const test = 'first priority';
const fallback = true;

const Example = () => {
  const [state, setState] = useState(test || fallback);

   console.log("state: ", state); // Logs the value of test
   
   return <span />
}

ReactDOM.render(<Example />, document.getElementById('root'));

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

Miroslav Glamuzina · Answer 2 · 2020-03-16T16:58:31.253

The Double Pipe Operator (Logical OR) in Javascript will return the first value that could be converted to true.

This is not exclusive to React, it is a baked in vanilla-JS operator that you may use anywhere.

Here are some examples (taken from MDN):

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

Note: If you use this operator to provide a default value to some variable, be aware that any falsy value will not be used. If you only need to filter out null or undefined, consider using the nullish coalescing operator

score -2 · Answer 3 · answered Mar 16 '20 at 16:50

const [thing, setThing] = useState(thing || otherThing);

If either one of thing or otherThing evaluates to a truthful expression, then useState(true) is called and returns a tuple of 2 items.

If both thing and otherThing do not evaluate to a truthful expression, then useState(false) is called and returns a tuple of 2 items.

Some example of non-truthful expressions:

false
null
undefined
""
[]
{}
1+1==3

Using (Or ||) syntax inside of React useState for assignment

3 Answers3