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…

In this tutorial, you will learn how to set up Webpack to use images as assets for your application. Essentially, there is not much in Webpack to include your desired images for your web application. First, put your image files into one folder of your projects application. For instance, your src/ folder may have a folder assets/ which has a…

The previous tutorials have shown you how to set up a basic web application with Webpack 5. So far, Webpack is only used to bundle all your JavaScript files, to transpile new JavaScript features via Babel, and to serve your bundle in development mode via Webpack's Development Server. Basically that's everything that's needed to get started with…