React Hooks Continued
In this article, I will be going through more of the most common/basic hooks used in React! Specifically, we will be talking about useContext, useRef, and useReducer!
useContext
This hook allows you to utilize React’s Context API, which allows you to share data without having to annoyingly deal with props. You can use the Provider and put the child components you want within the provider component to easily pass down the value. Currently, this is just normal Context API stuff so we will go to the hook itself.
In the child component, you will use the hook useContext to make life easier instead of having the consumer component previously.
useContext hook will give us access to the current value from our provider component.
useRef
Allows you to have a mutable value that does not re-render the User Interface like state will. This means if you were to have a counter like the useState example and you pressed the increment button and had it displaying the current value from useRef the value will never change on the screen. However, useRef is more commonly used to grab elements from the DOM.
useReducer
Is a hook used with Redux and is similar to state(I will go over Redux as a topic in a future post!). useReducer is similar to useState in which it returns an array of two values. The first one being the state itself and the second being the function dispatch in which dispatches an action. Actions, in short, is an object that has a type in which you can name to be whatever you want it to be and has an option of data that’s also known as a payload. Let's take a look at this with the example of the Counter again. We would have a button that calls dispatch and will trigger the reducers function. This function will have two arguments of state and action then commonly has a switch statement within it to manipulate the state depending on the action type we talked about earlier.
