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
 
const useLifecycleLogs = () => {
  console.log('The component has triggered a re-render')
​
  React.useEffect(() => {
    console.log('The component has been mounted')
    
    return () => {
      console.log('The component has been unmounted')
    }
  }, [])
}
​
function App () {
  useLifecycleLogs()
​
  return (
    <div />
  )
}
​

Hooks serve to reuse logic in functional components. Their name always starts with the "use" word. They cannot be executed conditionally. The component which contains the hook treats the logic inside the hook as if it were its own, preserving reactivity.

The component has triggered a re-render
The component has been mounted