requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.
TLDR: Pass an empty array as a second parameter for
useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use
useRef for … Read article
React has a built-in hook called useEffect. Hooks are used in function components. The
Class component comparison to
useEffect are the methods
useEffect will run when the component renders, which might be more times than you think. I feel like I've had this come up a dozen times in the past few weeks, so it seems worthy of a quick blog post.… Read article
We’ve looked at React Hooks before, around here at CSS-Tricks. I have an article that introduces them as well that illustrates how to use them to create components through functions. Both articles are good high-level overviews about the way they work, but they open up a lot of possibilities, too.
So, that’s what we’re going to do in this article. We’re going to see how hooks make our development process easier and faster by building a chat application.… Read article
useReducer is one of a handful of React hooks that shipped in React 16.7.0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function.
Here is an example of how it is used;
… Read article
const [state, dispatch] = useReducer(reducer, initialState);
In a previous post, we saw how to manage state using Unstated. As you might recall, Unstated uses React’s built-in
setState to allow you create components that can consume state by subscribing to a provider — like the React’s Context API.
Well, we’re going to build off that last post by looking at Unstated Next, a library that author Jamie Kyle identifies as the “spiritual successor" to his Unstated project. Unstated Next provides both React Hooks… Read article
Hooks make it possible to organize logic in components, making them tiny and reusable without writing a class. In a sense, they’re React’s way of leaning into functions because, before them, we’d have to write them in a component and, while components have proven to be powerful and functional in and of themselves, they have to render something on the front end. That’s all fine and dandy to some extent, but the result is a DOM that is littered with divs that make it gnarly to dig through through DevTools and debug.