After I rewrote my book The Road to React with React Hooks using function components instead of class components, aspiring React beginners always ask me whether React class components are going away . I always give them the same short answer, however, I thought it would be good to have this brief explanation here as well. Yes, React class…

In this React Hooks tutorial, I want to show you how to use a middleware for React's useReducer Hook. This middleware would run either before or after the state transition of the reducer and enables you to opt-in features. Before we can start, let's establish what we have as a baseline from the previous useReducer tutorial: Our React application…

In this tutorial you will learn everything about React's useEffect Hook. Let's say we have these two components whereas the parent component manages state with React's useState Hook and its child component consumes the state and modifies the state with a callback event handler : Based on the stateful boolean flag coming from the parent component…

When I work with clients on their React applications, I often encounter convoluted React components. Such overly complex components happen, because they have too many responsibilities -- whereas one responsibility translates to one feature and one feature translates to multiple React Hooks and event handlers . Thus, when having more than one…

If you are wondering how to run React's useEffect Hook only on update , you may be surprised that you need React's useRef Hook as helper to create an instance variable for tracking the component's lifecycle. The following code shows you how to achieve it: If you want to have a reusable custom hook for it, which only triggers the effect function…

If you are wondering how to run React's useEffect Hook only once , you may be surprised that you need React's useRef Hook as helper to create an instance variable for tracking the component's lifecycle. The following code shows you how to achieve it: If you want to have a reusable custom hook for it, which only triggers the effect function once…

Personally I bootstrapped a lot of React projects over the last years. I always had to setup the project from scratch, however, eventually I have created my own boilerplate project on GitHub for it. As you might know, uncountable React boilerplate projects and repositories were created that way. But the article is not my attempt to advertise yet…

I always struggled to use SVG in my React applications. Every time I searched about the topic online, I've found many ways on how to use SVG in React, but once I implemented the approaches, the success rates were very low. Today I want to give you a straightforward approach on how to use SVG icons as React components for your next React application…

If you happen to have a custom Webpack setup, you may be wondering how to set up React Router with Webpack. Let's say we have the following minimal React application using React Router: If you open your React application and navigate between both paths, everything should be fine. However, if you navigate via the browser's URL bar to /about, you…