# Chapter 7 : Enhancing Components with Hooks

## Samples

### `useEffect` hook

* Blocking Alert Call - ([run it](https://codesandbox.io/s/learning-react-useeffect-1-yu7f6?file=/src/App.js));
* Unreachable Code - ([run it](https://codesandbox.io/s/learning-react-useeffect-2-orpoq?file=/src/App.js));
* The `useEffect` hook - ([run it](https://codesandbox.io/s/learning-react-useeffect-3-flshw?file=/src/App.js));

### The Dependency Array

* Too many effects - ([run it](https://codesandbox.io/s/learning-react-useeffect-4-w723e?file=/src/App.js))
* Effect Dependencies - ([run it](https://codesandbox.io/s/learning-react-useeffect-5-uqol2?file=/src/App.js))
* Any Key to Render - ([run it](https://codesandbox.io/s/learning-react-useeffect-6-eg5w4?file=/src/App.js))
* Array Dependency issue - ([run it](https://codesandbox.io/s/learning-react-useeffect-7-3xo59?file=/src/App.js))
* `useMemo` - ([run it](https://codesandbox.io/s/learning-react-useeffect-8-w62wg?file=/src/App.js))
* Function Dependency issue - ([run it](https://codesandbox.io/s/learning-react-useeffect-9-yil9d?file=/src/App.js))
* `useCallback` - ([run it](https://codesandbox.io/s/learning-react-useeffect-10-e9im3?file=/src/App.js))

### When to useLayoutEffect

* Basic `useLayoutEffect` - ([run it](https://codesandbox.io/s/learning-react-uselayouteffect-1-bmxqw?file=/src/App.js))
* Custom: `useWindowSize` - ([run it](https://codesandbox.io/s/learning-react-uselayouteffect-2-vuir1?file=/src/App.js))
* Custom: `useMousePosition` - ([run it](https://codesandbox.io/s/learning-react-uselayouteffect-3-6ks6x?file=/src/App.js))

### useReducer

* Checkbox with `useState` - ([run it](https://codesandbox.io/s/learning-react-usereducer-1-ef229?file=/src/App.js))
* Checkbox with `toggle` - ([run it](https://codesandbox.io/s/learning-react-usereducer-2-oqy23?file=/src/App.js))
* Checkbox with `useReducer` - ([run it](https://codesandbox.io/s/learning-react-usereducer-3-mht63?file=/src/App.js))
* Increment number with `useReducer` - ([run it](https://codesandbox.io/s/learning-react-usereducer-4-b1yxs?file=/src/App.js))

### useReducer to handle Complex State

* `useState` with objects - ([run it](https://codesandbox.io/s/learning-react-usereducer-complex-1-k7ibz?file=/src/App.js))
* `useReducer` with objects - ([run it](https://codesandbox.io/s/learning-react-usereducer-complex-2-ewue8?file=/src/App.js))
* legacy `setState` with `useReducer` - ([run it](https://codesandbox.io/s/learning-react-usereducer-complex-3-2wldd?file=/src/App.js))