cw: This article contains no information pertinent to Marxism or the constituent unit, of Florida, US.
First of all I apologize to any Floridians I may have offended with my lackluster tech joke. As with all tech jokes, it wasn’t that funny to begin with, but in arduous mental work, sometimes there isn’t a lot of time to think about humor. Also, I’m from the sticks, I have nothing to hold over anyone’s head here.
React Hooks were introduced in 2019 as a means for React developers to use “stateful” logic in their applications without having to change the component hierarchy. They allow for breaking large components down into smaller reusable pieces based on their concern that can be used throughout an application. Before the introduction of hooks functional components could not manage state or lifecycles, so React developers were often working with large messy components made of mixed concerns and confusing tangles of state logic.
By implementing hooks you have the ability to always use functions instead of a mix of functions, classes, render props and higher-order components (a component that takes a component and returns a new component). Hooks used within higher-order components can also slim down the amount of repeated code by storing logic in one place for things such as mounting and unmounting and calling setState when data sources change.
Here are a few commonly used Hooks and a brief explanation of each:
![import React, { useState } from ‘react’;
function OverUsedExample() {
// Declare a new variable “count”
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click Here!
</button>
</div>
);
}](https://miro.medium.com/v2/resize:fit:1280/format:webp/1*ceFedhRhRwKls-t2fcV2aA.png)
useState: Likely the igniter of the conceptualization of hooks, and the most commonly used. useState manages reactive data and changes the UI to reflect accordingly. useState returns two things: the current state value and the function that will allow you to update it.
![import React, { useState, useEffect } from ‘react’;
const Example = () => {
const [message, setMessage] = useState(“What’s up, chickens?”);
useEffect(() => {
console.log(‘trigger use effect hook’);
setTimeout(() => {
setMessage(“I’ve explicitly asked you to not say that again.”);
}, 1000)
})
return <h1>{message}</h1>
};
export default App;](https://miro.medium.com/v2/resize:fit:1280/format:webp/1*2nBzrbMM2p2xg1iDhNtXQg.png)
useEffect: This hook allows a functional component to perform side effects which impact other components. It combines the functions of the lifecycle hooks componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, all in a single function API.
useReducer: This works like a Redux reducer. It can be used as an alternative to useState when your state logic depends on the previous state or in cases of tangled state logic that relies on multiple sub-values. It accepts 2 parameters, a reducer function as the first and the initial state as the second and returns an array with two values: the current state value paired with a dispatch function which is used to trigger an action via array destructuring.
There are several other useful hooks in the React library to help you organize and dry up your react components. You can learn more about them here in the React docs.
