Code 401: Class 32 - Custom Hooks

Questions

What does a component’s lifecycle refer to? The time between mounting and unmounting a component.
Why do you sometimes need to “wrap” functions in useCallback when called from within useEffect? Prevents the recreation of a function
Why are functional components preferred over class components? Functional components are just standard JS functions.
What is wrong with the following code? Hooks should not be used inside of a loop?

State hook useState(<initial state>) used to create a state variable
Effect hook Allows you to perform side effects, tells react to do something after the render
Reducer hook Returns the current state paired with a dispatch method

useEffect tells react to do something after the render is complete and after every update
useEffect(()=>{document.title = 'You clicked ${count} times'});
Custom hooks are prefixed with the word use, normal function but follows the rules of creating a Hook

Reducer takes in (state, action) and returns current state and a dispatch method
Preferable when complex state logic or multiple sub-values or when state depends on previous

This link offers a library of react hook tutorials and other supporting materials

useArray provides access to many array methods
react-use-form-state quick way to setup form
react-fetch-hook quick way to setup a fetch and provide isLoading state
useMedia hook tracks the state of CSS media query
react-useportal way to render children in to a DOM node that exists outside of the parents hierarchy
react-firebase-hooks used for firebase authentication
use-onClickOutside way to know if a user clicks anywhere besides the target
use-IntersectionObserver provides a way to asynchronously observer changes in an intersection target of an element and ancestor element
use-location for getting the location of the browser
use-redux hook returns the store and dispatch property