React introduced Hooks in February 2019 as an alternative to classes for managing state, lifecycles, and context in components. The main Hooks are useState for managing local state, useEffect for lifecycle methods like componentDidMount, and useContext for context. Classes are still supported but Hooks are expected to become the primary way components are defined. There are currently 10 Hooks including additional ones for reducer logic, memoization, callbacks, and more. Hooks allow lifting stateful logic out of classes while preserving their benefits like reuse and composition.

1. React Hooks - New API for react
22nd Feb 2019

2. React
Hooks offer an alternative api to classes for:
● State
● Lifecycle methods
● Context
Classes are not being deprecated at all. Everything’s backwards compatible.
The react team expects them to be the primary way components are written in the
future.

3. What are they?
There are currently 10 hooks: 3 “main” and 7 “additional”
Main
1. useState()
2. useEffect()
3. useContext()
Additional
1. useReducer()
2. useCallback()
3. useMemo()
4. useRef()
5. useImperitiveHandle()
6. useLayoutEffect()
7. useDebugValue()

4. How do they map over?
Constructor for state useState()
componentDidMount(),
componentDidUpdate() and
componentWillUnmount()
useEffect()
shouldComponentUpdate() React.memo() (v16.6.0)
Other less common cases have solutions provided for in the React Docs

5. Is there anything that only classes can do?
● componentDidCatch()
● getDerivedStateFromError()
● getSnapshotBeforeUpdate()

6. useState()
const [variableOfState, setVariableState] = useState(initialState)
UseState() replaces the state value entirely rather than the merging that setState()
does for state object. This means that if you plan to use the useState hook with a
single object with lots of property values you should use the spread operator to
make sure you don’t miss any when updating.
If you merely modify an object that is the state and try to pass that back in react
won’t let you, my guess is that it test for reference equality and doesn’t rerender if
it finds no change.

7. useEffect vs useLayoutEffect
useEffect runs after the render - this means it doesn’t block painting giving a slight
performance increase over componentDidmount and componentDidUpdate
useLayout effect is a hook exactly the same a useEffect but it runs in the same
phase as componentDidMount which is useful if you need to update the DOM or
get measurements on elements.

8. Linting
The react team have released an eslint plugin to help avoid the gotchas that
Hooks could potentially bring in:
● Relies on starting all hooks with ‘use’.
● Enforces:
○ Not using conditionals that might affect hook ordering
○ Hooks are called within other hooks or within a PascalCased function -
which they will take as indicative of it being a react component.

9. Other Hooks
● useMemo - memoization of a function
● useCallback - just sugar around use memo - almost the same
● useDebugValue - shows values for custom hooks in react devtools
● useImperativeValue