React Handbook

Computed/Memoized variables
- useMemo example
- useMemo and form filtering

Context
- useContext & createContext

Refs
- Focus an input programatically

User events

Form handling

Tables
- Table with data
- Table with data & filter

Custom hooks

Navigation components
- Opening menu
- Tabs

​x
 
function App () {
  const [counter, setCounter] = React.useState(0)
  
  React.useEffect(() => {
    console.log('Counter value has been updated to:', counter)
  }, [counter])
  
  const handleIncrement = () => {
     setCounter(prev => prev + 1)
  }
  
  return (
    <div>
      {counter}
      <br />
      <button onClick={handleIncrement}>
        Increment
      </button>
    </div>
  )
}

React.useEffect() also serves as a watcher for variable changes. If you include a variable in the dependency array, the body of the hook will run every time the variable changes.

Counter value has been updated to: 0