OBSOLETE: React: setState for primitive value doesn't work with ===

Question

EDIT: Obsolete, I made some mistake in another piece of code and the received data had the wrong data type.

I have a variable that stores the index of a selected item. I used a conditional expression based on that variable to add/remove a class name so said item is rendered in a distinguishing way. I boiled down the problem to this snippet:

function App() {
  const [selectedItem, setSelectedItem] = setState(-1);

  setSelectedItem(0);
  console.log(selectedItem);

  return (
    <>
    {selectedItem !== 0 && <p>no item selected</p>}
    {selectedItem === 0 && <p>item {selectedItem} selected</p>}
    </>
  );
}

This snippet always displays that no item is selected.

Answer 1

The hook is called useState, not setState.

Calling setSelectedItem inside the render function will trigger an infinite loop. You need to move it to an effect hook so it only runs one.

export default function App() {
  const [selectedItem, setSelectedItem] = useState(-1);

  useEffect(() => {
    setSelectedItem(0);
  }, []);
  
  console.log(selectedItem);

  return (
    <>
    {selectedItem !== 0 && <p>no item selected</p>}
    {selectedItem === 0 && <p>item {selectedItem} selected</p>}
    </>
  );
}

Answer 2

What is setState ? Do you mean useState ? And also, you shouldn't update the state like this, you should do it in a useEffect, and use an empty array as dependency, so it will run only once, when your component is being mounted:

useEffect(() => {
    setSelectedItem(0);
},[])

Then it is working like a charm