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…

Since React Hooks have been released, function components can use state and side-effects. There are two hooks that are used for modern state management in React: useState and useReducer. This tutorial goes step by step through a useState example in React for getting you started with this React Hook for state management. Simple State in React In…

Basically a React application is just a bunch of components in a component tree. There is one root component which kicks of the rendering for all the other components below. Commonly these components are function components in modern React applications. But they can be class components as well. However, not all of these components are only used…

If you are new to React, most likely you want to know how to display a list of items in React's JSX syntax. This tutorial for List components in React gives you a step by step walkthrough on how to render a list of simple primitives, how to render a list of complex objects, and how to update the state of your list in React. How to display a list of…

React Hooks were introduced to React to make state and side-effects available in React Function Components. Before it was only possible to have these in React Class Components; but since React's way of implementing Components has changed over the years , we have the class component's features available with React Hooks in React Function Components…

React Function Components -- also known as React Functional Components -- are the status quo of writing modern React applications. In the past, there have been various React Component Types , but with the introduction of React Hooks it's possible to write your entire application with just functions as React components. This in-depth guide shows…

React Hooks were introduced at React Conf October 2018 as a way to use state and side-effects 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. Therefore, many people refer to them as function components now. In this…

The article is a short tutorial on how to have state in React without a constructor in a class component and how to have state in React without a class component at all. It may be a great refresher on topics such as higher-order components and render prop components in React too. React State without a Constructor In React, state is used in a React…

Another fitting headline for the article could be: learn Higher Order Components with Conditional Rendering in React. Higher order components, or known under the abbreviation HOCs, are often a difficult to grasp pattern in React (next to the render props pattern ). These components can be used for multiple use cases. I want to pick out one use…