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 () {
  console.log('Component rendering')
  
  React.useEffect(() => {
    console.log('Component mounted')
    
    return () => {
      console.log('Component unmounted')
    }
  }, [])
  
  return (
    <div />
  )
}

Use React.useEffect() hook for both mount and unmount desired functionality implementation. If you leave the dependency array empty, that means the code inside will run only once, which replaces the class mount & unmount lifecycle hooks.

Component rendering
Component mounted