In the world of client-side React, React Query is the industry standard for data fetching. However, in this tutorial, you'll learn how to fetch data using React Hooks without any third-party libraries. This approach helps beginners grasp the fundamentals of state and effect management in React, and understand how to build custom hooks. The custom…
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 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…
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…
A neat custom React Hook that I used in some of my React freelance projects which checks if an element's content has overflow (here: vertical overflow): If you want to detect a horizontal overflow instead, you can exchange the hasOverflow assignment to the following: In a function component , the custom React hook can be used this way: The…
Can you use conditional React Hooks in React components? Technically: No. However, if you know about how React Hooks work internally, you can make conditional hooks work for you. Let's take the following example where we start without any conditional hook: In this example, we are conditionally rendering a list component . When the components…
