In this article, we will explore when and how to use React's useLayoutEffect hook and how it relates to the useEffect Hook. — If you'd like to follow along in your local IDE, you can find the GitHub Repo here. Getting Started fork and clone cd client npm i npm start Creating the Problem Sure, useLayoutEffect is not something you'll use often. It actually took me longer to think of a use case than to code out the…

In this article, we will discuss some common use cases for React’s useRef Hook. — Getting Started We will use the Profiler from the React Dev Tools to see how our components are rendering. If you don’t have the React Dev Tools and plan to follow along, you’ll need to pause and download it now. Chrome React Dev Tools Firefox React Dev Tools If you’d like to…

In this article, we will explore when and how to use React's useMemo Hook to increase your app's performance. TL;DR If you’re here solely to understand when to (and not to) use useMemeoand don’t want to work through the examples, I’ll spare you. According to the React Docs, much like useCallback…

In this article, we will explore when and how to use React’s useCallback hook and a mistake made by most Junior Developers. — TL;DR If you’re here for a quick definition and don’t want to traverse through the examples, I’ll spare you. According to the React Docs,useCallback is an opt-in performance enhancer Hook used to create referential equality for function definitions. The two most common use cases are: