What are Hooks?
Here you can dive in with React Hooks: The magic that is used to infuse superpowers into functional components.
In React, we write all of our Javascript or Typescript components as pure functions that are defined as constants, take a single argument of props, and return the rendered HTML of the component itself.
import React from 'react';
const MyComponent = (props) => {
return(
<>Hello World</>
)
}
Remember, this “stateless” functional component is a pure function. For this reason, it has no baggage of the ‘this’ keyword and no concept of its context within the application. Its scope is defined every time it is run and then thrown away as soon as the return happens.
So then how is a component supposed to — for example — do anything?
That’s where hooks come into play.
A hook lets you make a hook— kind of like making a phone call and writing down a piece of information— before your return statement in your component.
Hooks moved React code away from Object-Oriented Programming (OOP) and towards functional programming with composition.
In particular, this shifted the paradigm from information hiding & object messaging to composable functions that have reusable elements — hooks— built into them. Here are the most important standard hooks. However, you will also learn to create custom hooks. Custom hooks are needed to encapsulate your business logic into reusable components.
| useState | Use this for setting a local (to this component) state. Takes either 1) an initial value or 2) initializer function. It returns via destructurig two objects: 1) the variable that will hold the state, and 2) a function for you to use to update the stateconst [age, setAge] = useState(28); |
| useEffect | Triggers after your component is rendered & mounted or re-rendered onto your page. Typically you will associate props that may have changed due to the render with DOM updates you want to make (like calculations, animations, etc). First argument is function that will get calls. This function itself should return another function that will get called on teardown.. Second argument is either an array of props or state (which will make it update only when one of those have updated) or an empty array (which will make it run only once when the component is first rendered).useEffect(() => {or useEffect((() => { |
| useLayoutEffect | useEffect (the function above) runs asynchronously, which means it can’t know some things about your DOM that are happening in realtime. If you need a callback that will run synchrnously, you will need to use useLayoutEffect. This allows you to get element values as they are on the screen in realtime. However, using this blocks the UI so should only be done for fast operations. |
| useReducer | Use reducer takes two parameters: reducer and the initial state. It returns two objects: a state that will get updated and an action. An action is like a dispatcher object that will receive a new state (when you want to change the state) and pass that new state to the reducer. The reducer then filters the data to determine how the data that was received will be used to update the state. |
| useContext | This is a way to handle a global preference state to be shared across contexts— like the user preference for light or dark background. What it will do is inject an object that contains a context (a shared reference point) between all componetns it is injected into. You are cautioned against using it for application state and against its overuse. This is important because if you begin to hold application state you will work against the application hierarchy of React’s top-down rendering approach. |
| useRef | Use Ref is necessary when you need something to point to a specific DOM element on the page (otherwise you have no native way to reference the DOM). It can also be used to hold a state-like property that does not need to behave like state— in other words, it does not trigger a rerender if it changes. This is use for for “in-house” properties that don’t affect the UI. |
| useMemo | This hook is used for caching a part of the page. By default React will rerender everything. |
| useCallback | Will create an instance of a function once a set of parameters have been changed. |