What is const [isOpen, setOpen] = useState(false);

what is const [isOpen, setOpen] = useState(false);


I saw in this tutorial

What is meant when we pass false as an argument in useState and what is [isOpen, setOpen]

useState is a function that returns a two element array. First element is a value, second element is a function that sets a new value. The argument given to the function is the initial value.

Then you can use the value and the setter function in your component – the value will start off as false, then you can use the setter to toggle the value

function Example() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <p style={{ visibility: isVisible ? "visible" : "hidden" }}>HELLO</p>
      <button onClick={() => setIsVisible(!isVisible)}>Toggle visibility</button>
    </div>
  )
}

The p element with “HELLO” starts off hidden. Click the button, isVisible toggles to true, p element is visible. Click it again, isVisible toggles to false, p element is hidden again, etc.

Working example: lucid-microservice-ndrrbv - CodeSandbox


It works basically like this:

// somewhere in the react code a reference to
// the current rendered component we're
// looking at
let currentComponent;

// And map of 
// rendered components -> their state
const componentStates = new Map()

// Then this is the function:
function useState(initialState) {
  // If the current rendered component isn't
  // in that map, add it and set the state
  if (componentStates.has(currentComponent) === false) {
    componentStates.set(currentComponent, initialState);
  }

  // Then return a two-element array with
  // the current state plus a function to update
  // the map of states
  return [
    componentStates.get(currentComponent),
    (newState) => componentStates.set(currentComponent, newState
  ];
}

Edit: also, this

const [isOpen, setOpen] = useState(false)

Is same as

const openstate = useState(false);

Then using openstate[0] to access the value and openstate[1] to access the setter function, eg

const openstate = useState(false);
const isOpen = openstate[0];
const setOpen = openstate[1];

That’s just not as clear though. See Destructuring assignment - JavaScript | MDN

This is known as state in React.
and in the following example the initial state (isOpen) holds false value.
Probably the use in this particular case is to toggle .

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.