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…
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…
React introduced Hooks quite a while ago. With their release, Hooks gave function components the ability to use state and side-effects with built-in Hooks such as React's useState Hook and React's useEffect Hook . There are only a handful built-in Hooks (e.g. useReducer , useCallback , useMemo , useContext ) provided by React though…
In this React tutorial, you will learn how to store state in local storage by using a custom React Hook . We will address the session storage shortly as well, but essentially it is used the same way as the local storage in React. Before reading about using the local storage in React, I will give you a brief overview of how to use it and when to…
A neat custom React Hook that I used in some of my React freelance projects which gets you the scrollbar's width. You can just use it in any React component and it returns the width of the scrollbar for this particular browser (and operating system): In essence the custom hook just renders a hidden scrollbar into the project, measures it, and…
A neat custom React Hook that shows how to use local storage in React to store state. You can just use it in any React component and it allows you to write and read state to and from the local storage: The local storage hook is only there as a learning experience though. If you rely on the local storage for your React application in production…
A tutorial about how to detect a click outside of a React component by creating a custom React hook for it. For example, you may want such custom React hook for various components like a dialog or dropdown, because they should close when a user clicks outside of them. So we need a way to find out about this outside click. Much of what you will…
A neat custom React Hook that I used in some of my React freelance projects which detects the scroll direction of a user: In a function component , the custom React hook can be used this way: That's it. There may be many ways to improve this custom hook (e.g. check the horizontal instead of the vertical scroll direction), but for my cases it…
