functional component set useState in conditional function

Question

If you set useState variable in function where is condition like "if statement" it's ok? I read that you shouldn't use hook's in conditions but is it also true for setting the state? Example will show what i mean. If I cant do like this how can I set it right way if I have multiple variables and if conditions. Please help me thanks

I'm aware of this: https://reactjs.org/docs/hooks-rules.html#explanation but I have some doubts

import React, { useState} from "react";

const MoreInfo = () => {

const [more_info, setMore_info] = useState("test");

const handleExpand = (event) => {
        if (icon_expand === 'expand_more') {
        setMore_info("test2");  // is this ok in if?
      }
}

  return (
 <IconButton onClick={handleExpand}>
);
};

export default MoreInfo;

Answer 1

The hook is useState. And the rules apply for that call only (and any other hook's call that might be using, and custom hooks, like useSomething).

The setState call is not a hook call. You're calling a method that was returned from a hook call. Infact React guarantees that the setState reference doesn't change between renders.

Rules of hooks:

Only Call Hooks at the Top Level

Only Call Hooks from React Functions

The following article might help you understand why these rules exist. It gives a visual explanation of hooks under the hood.

https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

function App() {
  
  // THE useState CALL SHOULD BE ON TOP LEVEL
  // CAN'T BE CALLED INSIDE ANY CONDITIONALS
  const [myState,setMyState] = React.useState(0); 
  
  // THE setState CALLS CAN BE ANYWHERE
  function changeCounter(value) {
    if (value === 'increment') {
      setMyState((prevState) => prevState + 1);
    }
    else if (value === 'decrement') {
      setMyState((prevState) => prevState - 1);
    }
  }
  
  return(
    <React.Fragment>
      <div>Counter: {myState}</div>
      <button onClick={() => changeCounter('increment')}>
        +
      </button>
      <button onClick={() => changeCounter('decrement')}>
        -
      </button>
    </React.Fragment>
  );
}

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

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