HomeToolsAbout

Hooks

How to use it

You can only call hooks at the top level of your component or your own hooks

  • You can’t call it inside loops or conditions

If you need to call the hook inside a loop, you have to extract a new component and move the state into it

Caveat

setState in render and Side Effect

What is bad practice is to call setState explicitly in the render method, because the render method should be able to run multiple times without having any side effects (Without affecting anything outside the render itself).

render(){
  return (
    // good, based on event
    <button onClick={this.handleClick}>
      {this.state.isToggleOn ? 'ON' : 'OFF'}
    </button>

    // bad, based on render
    {this.setState(() => ({}))}
  );
}

Referecing event call prevents setState from immediately firing off.

  • Only when the targeted event is invoked, the

setState execution order is not guaranteed in Strict Mode

In React Strict Mode, setState can fire off before or after other non-state changing code within event trigger callback function.

When the Strict Mode is enabled and component is rendered twice in development mode, there is no guarantee that setState is called in the correct order when other none state-changing code is mixed in.

  • the idempotency requirement is broken and the app will behave in unexpected ways.
// inside some event function
(e) => {
  console.log("we are before setState")

  setState("we are in setState, doing something")

  console.log("we are after setState")
}

In above function, on subsequent renders, there is no guarantee that the setState will be executed second after the first log and before the third log.

// inside the same event function
(e) => {
  setState(()=>{
    console.log("we are inside setState, before action")

    console.log("we are in setState, doing something")

    console.log("we are after the action, still in setState")
  })
}

In contrast, above code will guarantee that the execution order of the setState action will trigger in order as expected.

Lazy Computation

Every hook has an update queue.

  • When you call the setState function, React doesn't call the updater function immediately, but saves it inside the queue, and schedules a re-render.

  • There might be more updates after this one, to this hook, other hooks, or even hooks in other components in the tree.

React will calculate the new state only when it actually needs it.

AboutContact