When using React's useState Hook in TypeScript, the method usually infers the implicit type for the returned state from the provided argument automatically. In the following example, React's useState Hook in a function component knows that it deals with a number type. Hence the returned state (here: count ) has the type number in addition to…

A brief summary of how to use React's useRef Hook for using a ref with TypeScript. First, a ref in React is mainly used to assign a HTML element to it. The assigned HTML element gives us imperative read and write operations on it which allows us to programmatically call functions. Take the following example for focusing an input element: When using…

React Elements, Components, and Instances are different terms in React which work closely together. This guide will walk you through all three terms and explain them step by step. We will start off with the following code snippet as example: A React component is literally the declaration of a component as we see it in the previous code snippet…

This is a comprehensive tutorial on Monorepos in JavaScript/TypeScript --- which is using state of the art tools for these kind of architectures in frontend applications. You will learn about the following topics from this tutorial: What is a monorepo? How to structure a monorepo architecture? How to create a monorepo? Which tools to use for a…

You may have noticed the "as" prop when working with modern UI component libraries . Essentially the "as" prop allows you to replace rendered HTML elements in a React component from the outside by passing them in as props : Usually it is called "as" prop, however, one can see it also as "component", "element", "variant" prop -- or a combination…

Batching in React describes the internal implementation detail of React which treats multiple state updates as one state update. The benefit: multiple state updates are batched as one state update and therefore trigger only one re-rendering of the component which improves the rendering performance especially for larger React applications. Let's…

A React Router tutorial which teaches you how to use Lazy Loading with React Router 6 . The code for this React Router v6 tutorial can be found over here . In order to get you started, create a new React project (e.g. create-react-app ). Afterward, install React Router and read the following React Router tutorial to get yourself aligned to…

Higher-Order Components in React, also known as HOCs , are an advanced component pattern in React (next to Render Props Components ). Higher-Order Components can be used for multiple use cases. I want to pick out one use case, the conditional rendering with Higher-Order Components, to give you two outcomes from this article as a learner. First…

A button may be the first interactive element that you are using in a React component. Therefore, this is a short React tutorial by example for beginners about creating a button in React, how to use it, and how to extract it as a reusable component. First of all, a button is just an HTML button element which can be rendered in React's JSX: By using…