Free Tailwind CSS and React UI Kit and Admin Product description. Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let Notus React amaze you with its cool features and build tools and get your project to a whole new level. Cheatsheet for React Hooks. A cheatsheet with live editable examples 😎. A one-stop reference for hooks 💪. The cheat sheet was created by Kenneth Setzer and released especially for Smashing Magazine and its readers. The cheat sheet is a mousepad-sized image featuring a typical PC keyboard. Photoshop’s keyboard shortcuts are listed for each key, with the shortcut and its icon printed on the individual key. Works best with JavaScript/TypeScript and has been tested with C#, Java, PHP, Python, and more. In theory it should work with any language you can debug in VS Code. This open source design system features a UI library for React and Vue, providing yet another option for building modern interfaces. Azure Key Vault is a service from Azure that allows storage of keys, secrets and certificate in a safe and encrypted repository. In this tutorial, I am going to show you different ways that Azure Key Vault can be used by Azure DevOps Pipelines.
TypeScript is a great language that allows type-checking your code in order to make it more robust and understandable.
In this guide, I will lead you in setting up TypeScript types on React hooks (useState, useContext, useCallback, and so on).
React Typescript Props
Sorry for the interrupt!
If you're interested in learning TypeScript or React in a comprehensive way, I highly recommend these bestseller courses:
> Understanding TypeScript - 2020 Edition
> React - The Complete Guide (incl Hooks, React Router, Redux)
This is affiliate links, so by purchasing, you support the blog at the same time.Let's dive in
Set types on useState
The useState hook allows you to manage state in your React app. It's the equivalent of this.state in a Class component.
To set types on useState hook, you need to pass into <> the type of the state. You can also use union type like this <number | null> if you don't have an initial state.
Set types on useRef
React Ts
The useRef hook returns a mutable ref object that allows accessing DOM elements.
As you can see, the way useRef receives types is the same as the useState hook. You just have to pass it into the <> - and, if you have multiple type annotations, just use union type as I do here.
Set types on useContext
useContext is a hook that allows accessing and consuming a given Context in a React app.
Here, we start by creating the IArticle interface that is the type of our context.Next, we use it on the createContext() method to create a new context, and then initialize it with [] - you can also use null as an initial state if you want too.
With that in place, we can now handle the state of the context and set the type on useContext in order to expect an array of type IArticle as value.
Set types on useReducer
The useReducer hook helps to manage more complex states. It's an alternative to useState - but keep in mind that they are different.
Here, we start by declaring the action types that allow handling the counter. Next, we set respectively two types for the reducer function and the counter state.
The reducer expects a state of type ICounter and an action of type IReducer. With that, the counter can now be handle consequently.
The useReducer hook receives the reducer function and an initial state as arguments and returns two elements: the state of the counter and the dispatch action.
To set the type for the values returned by ueReducer - just pass into the <> the type of your data.
With that in place, the counter can now be incremented or decremented through useReducer.
Set types on useMemo
The useMemo hook allows you to memorize the output of a given function. It returns a memoized value.
To set types on useMemo - just pass into the <> the type of data you want to memorize.Here, the hook expects a string as a returned value.
Set types on useCallback
React Fc
The useCallback hook allows you to memorize a function to prevent unnecessary re-renders. It returns a memoized callback.
Here, we declare the CallbackType type that is using as type on the callback we want to memorize.It expects to receive parameters of type string and should return a value of type void.
Next, we set that type on useCallback - and if you pass a wrong type to the callback or the array of dependencies - TypeScript will yell at you.
Thanks for reading
Ever since I started using TypeScript, I can't stop using it. Sometimes finding the correct type and where you should import it from can be a real headache. Especially when building a ReactJS application. This blog post is a great chance to publicly document my most used React TypeScript types. I focus on functional components and react hooks.
The structure of the article is that each paragraph is a standalone tip.
To create a React TypeScript project, we can use Create React App:
There have been lots of talks about the right way to import React. This is the most updated way to do it:
The return type of a functional component is ReactElement
If you want to extend the props of a native HTML element, you can use the generic class HTMLAttributes. Let's say I want to create a new button:
Note that we use destructuring to forward the props to the button element.
The children prop is of type ReactNode.
Typescript React Cheat Sheet Free
React's events system uses its own types and not the native HTML events. Make sure to import the event from the react library. import { MouseEvent } from 'react'.
Pass the correct type to the useRef generic. If you want to create a ref to an input element:
The ref.current type will automatically be HTMLInputElement.
The same goes for useState.
If you provide an initial value in both cases, the type will be inferred implicitly.
When creating custom hooks make sure to explicitly set the returns type. Otherwise, TypeScript may infer incorrectly the types.
This is far from being a complete cheat sheet but rather documents the things I use the most. Check out this awesome cheat sheet for more information: https://github.com/typescript-cheatsheets/react.
Typescript React Redux Cheat Sheet