React Hooks are function calls that allow us to include state in a functional component.
State is kept isolated from components to keep the component stateless and pure, and the state reuseable. Hooks allow us to reintroduce statefull logic into components whilst preserving these features.
- useState is used to declare a stateful value and a corresponding function to update the value.
- useEffect is used to manage side effects which involve connecting the component to external systems.
- useContext is used to receive information from parent components without having to use prop-drilling.
- useRef is used to store a reference to an object (typically a DOM node) and can be updated without causing a re-render.
- useMemo is used to cache the result of an expensive calculation so that is doesnt run again on re-render.
- useCallback is used to cache a function to be used in a child component so that the child does not re-render when the parent does.
🛈 The full code for this ASP.NET Core Identity app, including the test suite, can be found on my GitHub.