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…

After learning how to pass props in React , the next thing you will learn is often state in React . Managing JavaScript primitives such as strings, booleans, and integers in React State are the basics for state management in React. But what about more complex data structures such as JavaScript arrays? There are many questions popping up for React…