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…
In a modern React world, everyone uses function components with React Hooks . However, the concept of higher-order components (HOC) is still applicable in a modern React world, because they can be used for class components and function components. Therefore they are the perfect bridge for using reusable abstractions among legacy and modern…
In this tutorial we will implement use JavaScript fake API with mock data from a pseudo backend to create our frontend application with React. Often this helps whenever there is no backend yet and you need to implement your React frontend against some kind of realistic data. You can find the finished project on GitHub . React with Mock Data from a…
React Hooks were introduced at React Conf October 2018 as a way to use state and side-effects (see lifecycle methods in class components) in React function components. Whereas function components have been called functional stateless components (FSC) before, they are finally able to use state with React Hooks and therefore many people refer to…
If you have started to use React's useState hook for your application, you may be missing a callback function , because only the initial state can be passed to the hook. In React class components, the setState method offers an optional second argument to pass a callback function. However, this second argument isn't available for React's useState…
React's useMemo Hook can be used to optimize the computation costs of your React function components . We will go through an example component to illustrate the problem first, and then solve it with React's useMemo Hook . Keep in mind that most of the performance optimizations in React are premature. React is fast by default, so every…
React's useCallback Hook can be used to optimize the rendering behavior of your React function components . We will go through an example component to illustrate the problem first, and then solve it with React's useCallback Hook . Keep in mind that most of the performance optimizations in React are premature. React is fast by default, so every…
React's memo API can be used to optimize the rendering behavior of your React function components . We will go through an example component to illustrate the problem first, and then solve it with React's memo API . Keep in mind that most of the performance optimizations in React are premature. React is fast by default, so every performance…
Today I came across a question in my Newsletter regarding computed properties in React. I didn't know about the term computed properties before, because such a term doesn't really exist in React, but it exists in other frameworks like Vue. Maybe I would call it computed values , computed state , or derived state (not from props though) in…
It doesn't happen often, but sometimes you have to update state from props in React. In this brief walkthrough, I want to show you a use case where you would want to derive state from props and how to do it for the initial props and updated props. Keep in mind that this concept should only be used rarely though, because often there is no need…
