ProductPromotion

React.JS

made by https://0x3d.site

GitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript

Cheatsheets for experienced React developers getting started with TypeScript - typescript-cheatsheets/react

Visit Site

GitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript

React TypeScript Cheatsheet

Cheatsheet for using React with TypeScript.

Web docs | Contribute! | Ask!

:wave: This repo is maintained by @eps1lon and @filiptammergard. We're so happy you want to try out React with TypeScript! If you see anything wrong or missing, please file an issue! :+1:

The Basic Cheatsheet is focused on helping React devs just start using TS in React apps
- Focus on opinionated best practices, copy+pastable examples.
- Explains some basic TS types usage and setup along the way.
- Answers the most Frequently Asked Questions.
- Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.
- The goal is to get effective with TS without learning too much TS.
The Advanced Cheatsheet helps show and explain advanced usage of generic types for people writing reusable type utilities/functions/render prop/higher order components and TS+React libraries.
- It also has miscellaneous tips and tricks for pro users.
- Advice for contributing to DefinitelyTyped.
- The goal is to take full advantage of TypeScript.
The Migrating Cheatsheet helps collate advice for incrementally migrating large codebases from JS or Flow, from people who have done it.
- We do not try to convince people to switch, only to help people who have already decided.
- ⚠️This is a new cheatsheet, all assistance is welcome.
The HOC Cheatsheet specifically teaches people to write HOCs with examples.
- Familiarity with Generics is necessary.
- ⚠️This is the newest cheatsheet, all assistance is welcome.

Basic Cheatsheet

Basic Cheatsheet Table of Contents

React TypeScript Cheatsheet

Section 1: Setup

Prerequisites

You can use this cheatsheet for reference at any skill level, but basic understanding of React and TypeScript is assumed. Here is a list of prerequisites:

Basic understanding of React.
Familiarity with TypeScript Basics and Everyday Types.

In the cheatsheet we assume you are using the latest versions of React and TypeScript.

React and TypeScript starter kits

React has documentation for how to start a new React project with some of the most popular frameworks. Here's how to start them with TypeScript:

Next.js: npx create-next-app@latest --ts
Remix: npx create-remix@latest
Gatsby: npm init gatsby --ts
Expo: npx create-expo-app -t with-typescript

Try React and TypeScript online

There are some tools that let you run React and TypeScript online, which can be helpful for debugging or making sharable reproductions.

Section 2: Getting Started

Function Components

These can be written as normal functions that take a props argument and return a JSX element.

// Declaring type of props - see "Typing Component Props" for more examples
type AppProps = {
  message: string;
}; /* use `interface` if exporting so that consumers can extend */

// Easiest way to declare a Function Component; return type is inferred.
const App = ({ message }: AppProps) => <div>{message}</div>;

// You can choose to annotate the return type so an error is raised if you accidentally return some other type
const App = ({ message }: AppProps): React.JSX.Element => <div>{message}</div>;

// You can also inline the type declaration; eliminates naming the prop types, but looks repetitive
const App = ({ message }: { message: string }) => <div>{message}</div>;

// Alternatively, you can use `React.FunctionComponent` (or `React.FC`), if you prefer.
// With latest React types and TypeScript 5.1. it's mostly a stylistic choice, otherwise discouraged.
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);
// or
const App: React.FC<AppProps> = ({ message }) => <div>{message}</div>;

Tip: You might use Paul Shen's VS Code Extension to automate the type destructure declaration (incl a keyboard shortcut).

You may see this in many React+TypeScript codebases:

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

However, the general consensus today is that React.FunctionComponent (or the shorthand React.FC) is not needed. If you're still using React 17 or TypeScript lower than 5.1, it is even discouraged. This is a nuanced opinion of course, but if you agree and want to remove React.FC from your codebase, you can use this jscodeshift codemod.

Some differences from the "normal function" version:

React.FunctionComponent is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).
It provides typechecking and autocomplete for static properties like displayName, propTypes, and defaultProps.
- Note that there are some known issues using defaultProps with React.FunctionComponent. See this issue for details. We maintain a separate defaultProps section you can also look up.
Before the React 18 type updates, React.FunctionComponent provided an implicit definition of children (see below), which was heavily debated and is one of the reasons React.FC was removed from the Create React App TypeScript template.

// before React 18 types
const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title,
}) => <div title={title}>{children}</div>;

In @types/react 16.9.48, the React.VoidFunctionComponent or React.VFC type was added for typing children explicitly. However, please be aware that React.VFC and React.VoidFunctionComponent were deprecated in React 18 (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/59882), so this interim solution is no longer necessary or recommended in React 18+.

Please use regular function components or React.FC instead.

type Props = { foo: string };

// OK now, in future, error
const FunctionComponent: React.FunctionComponent<Props> = ({
  foo,
  children,
}: Props) => {
  return (
    <div>
      {foo} {children}
    </div>
  ); // OK
};

// Error now, in future, deprecated
const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({
  foo,
  children,
}) => {
  return (
    <div>
      {foo}
      {children}
    </div>
  );
};

In the future, it may automatically mark props as readonly, though that's a moot point if the props object is destructured in the parameter list.

In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of React.FunctionComponent.

Hooks

Hooks are supported in @types/react from v16.8 up.

useState

Type inference works very well for simple values:

const [state, setState] = useState(false);
// `state` is inferred to be a boolean
// `setState` only takes booleans

See also the Using Inferred Types section if you need to use a complex type that you've relied on inference for.

However, many hooks are initialized with null-ish default values, and you may wonder how to provide types. Explicitly declare the type, and use a union type:

const [user, setUser] = useState<User | null>(null);

// later...
setUser(newUser);

You can also use type assertions if a state is initialized soon after setup and always has a value after:

const [user, setUser] = useState<User>({} as User);

// later...
setUser(newUser);

This temporarily "lies" to the TypeScript compiler that {} is of type User. You should follow up by setting the user state — if you don't, the rest of your code may rely on the fact that user is of type User and that may lead to runtime errors.

useCallback

You can type the useCallback just like any other function.

const memoizedCallback = useCallback(
  (param1: string, param2: number) => {
    console.log(param1, param2)
    return { ok: true }
  },
  [...],
);
/**
 * VSCode will show the following type:
 * const memoizedCallback:
 *  (param1: string, param2: number) => { ok: boolean }
 */

Note that for React < 18, the function signature of useCallback typed arguments as any[] by default:

function useCallback<T extends (...args: any[]) => any>(
  callback: T,
  deps: DependencyList
): T;

In React >= 18, the function signature of useCallback changed to the following:

function useCallback<T extends Function>(callback: T, deps: DependencyList): T;

Therefore, the following code will yield "Parameter 'e' implicitly has an 'any' type." error in React >= 18, but not <17.

// @ts-expect-error Parameter 'e' implicitly has 'any' type.
useCallback((e) => {}, []);
// Explicit 'any' type.
useCallback((e: any) => {}, []);

useReducer

You can use Discriminated Unions for reducer actions. Don't forget to define the return type of reducer, otherwise TypeScript will infer it.

import { useReducer } from "react";

const initialState = { count: 0 };

type ACTIONTYPE =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: string };

function reducer(state: typeof initialState, action: ACTIONTYPE) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - Number(action.payload) };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement", payload: "5" })}>
        -
      </button>
      <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
        +
      </button>
    </>
  );
}

View in the TypeScript Playground

In case you use the redux library to write reducer function, It provides a convenient helper of the format Reducer<State, Action> which takes care of the return type for you.

So the above reducer example becomes:

import { Reducer } from 'redux';

export function reducer: Reducer<AppState, Action>() {}

useEffect / useLayoutEffect

Both of useEffect and useLayoutEffect are used for performing side effects and return an optional cleanup function which means if they don't deal with returning values, no types are necessary. When using useEffect, take care not to return anything other than a function or undefined, otherwise both TypeScript and React will yell at you. This can be subtle when using arrow functions:

function DelayedEffect(props: { timerMs: number }) {
  const { timerMs } = props;

  useEffect(
    () =>
      setTimeout(() => {
        /* do stuff */
      }, timerMs),
    [timerMs]
  );
  // bad example! setTimeout implicitly returns a number
  // because the arrow function body isn't wrapped in curly braces
  return null;
}

function DelayedEffect(props: { timerMs: number }) {
  const { timerMs } = props;

  useEffect(() => {
    setTimeout(() => {
      /* do stuff */
    }, timerMs);
  }, [timerMs]);
  // better; use the void keyword to make sure you return undefined
  return null;
}

useRef

In TypeScript, useRef returns a reference that is either read-only or mutable, depends on whether your type argument fully covers the initial value or not. Choose one that suits your use case.

Option 1: DOM element ref

To access a DOM element: provide only the element type as argument, and use null as initial value. In this case, the returned reference will have a read-only .current that is managed by React. TypeScript expects you to give this ref to an element's ref prop:

function Foo() {
  // - If possible, prefer as specific as possible. For example, HTMLDivElement
  //   is better than HTMLElement and way better than Element.
  // - Technical-wise, this returns RefObject<HTMLDivElement>
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Note that ref.current may be null. This is expected, because you may
    // conditionally render the ref-ed element, or you may forget to assign it
    if (!divRef.current) throw Error("divRef is not assigned");

    // Now divRef.current is sure to be HTMLDivElement
    doSomethingWith(divRef.current);
  });

  // Give the ref to an element so React can manage it for you
  return <div ref={divRef}>etc</div>;
}

If you are sure that divRef.current will never be null, it is also possible to use the non-null assertion operator !:

const divRef = useRef<HTMLDivElement>(null!);
// Later... No need to check if it is null
doSomethingWith(divRef.current);

Note that you are opting out of type safety here - you will have a runtime error if you forget to assign the ref to an element in the render, or if the ref-ed element is conditionally rendered.

Refs demand specificity - it is not enough to just specify any old HTMLElement. If you don't know the name of the element type you need, you can check lib.dom.ts or make an intentional type error and let the language service tell you:

Option 2: Mutable value ref

To have a mutable value: provide the type you want, and make sure the initial value fully belongs to that type:

function Foo() {
  // Technical-wise, this returns MutableRefObject<number | null>
  const intervalRef = useRef<number | null>(null);

  // You manage the ref yourself (that's why it's called MutableRefObject!)
  useEffect(() => {
    intervalRef.current = setInterval(...);
    return () => clearInterval(intervalRef.current);
  }, []);

  // The ref is not passed to any element's "ref" prop
  return <button onClick={/* clearInterval the ref */}>Cancel timer</button>;
}

useImperativeHandle

Based on this Stackoverflow answer:

// Countdown.tsx

// Define the handle types which will be passed to the forwardRef
export type CountdownHandle = {
  start: () => void;
};

type CountdownProps = {};

const Countdown = forwardRef<CountdownHandle, CountdownProps>((props, ref) => {
  useImperativeHandle(ref, () => ({
    // start() has type inference here
    start() {
      alert("Start");
    },
  }));

  return <div>Countdown</div>;
});

// The component uses the Countdown component

import Countdown, { CountdownHandle } from "./Countdown.tsx";

function App() {
  const countdownEl = useRef<CountdownHandle>(null);

  useEffect(() => {
    if (countdownEl.current) {
      // start() has type inference here as well
      countdownEl.current.start();
    }
  }, []);

  return <Countdown ref={countdownEl} />;
}

Custom Hooks

If you are returning an array in your Custom Hook, you will want to avoid type inference as TypeScript will infer a union type (when you actually want different types in each position of the array). Instead, use TS 3.4 const assertions:

import { useState } from "react";

export function useLoading() {
  const [isLoading, setState] = useState(false);
  const load = (aPromise: Promise<any>) => {
    setState(true);
    return aPromise.finally(() => setState(false));
  };
  return [isLoading, load] as const; // infers [boolean, typeof load] instead of (boolean | typeof load)[]
}

View in the TypeScript Playground

This way, when you destructure you actually get the right types based on destructure position.

If you are having trouble with const assertions, you can also assert or define the function return types:

import { useState } from "react";

export function useLoading() {
  const [isLoading, setState] = useState(false);
  const load = (aPromise: Promise<any>) => {
    setState(true);
    return aPromise.finally(() => setState(false));
  };
  return [isLoading, load] as [
    boolean,
    (aPromise: Promise<any>) => Promise<any>
  ];
}

A helper function that automatically types tuples can also be helpful if you write a lot of custom hooks:

function tuplify<T extends any[]>(...elements: T) {
  return elements;
}

function useArray() {
  const numberValue = useRef(3).current;
  const functionValue = useRef(() => {}).current;
  return [numberValue, functionValue]; // type is (number | (() => void))[]
}

function useTuple() {
  const numberValue = useRef(3).current;
  const functionValue = useRef(() => {}).current;
  return tuplify(numberValue, functionValue); // type is [number, () => void]
}

Note that the React team recommends that custom hooks that return more than two values should use proper objects instead of tuples, however.

More Hooks + TypeScript reading:

If you are writing a React Hooks library, don't forget that you should also expose your types for users to use.

Example React Hooks + TypeScript Libraries:

Something to add? File an issue.

Class Components

Within TypeScript, React.Component is a generic type (aka React.Component<PropType, StateType>), so you want to provide it with (optional) prop and state type parameters:

type MyProps = {
  // using `interface` is also ok
  message: string;
};
type MyState = {
  count: number; // like this
};
class App extends React.Component<MyProps, MyState> {
  state: MyState = {
    // optional second annotation for better type inference
    count: 0,
  };
  render() {
    return (
      <div>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

View in the TypeScript Playground

Don't forget that you can export/import/extend these types/interfaces for reuse.

It isn't strictly necessary to annotate the state class property, but it allows better type inference when accessing this.state and also initializing the state.

This is because they work in two different ways, the 2nd generic type parameter will allow this.setState() to work correctly, because that method comes from the base class, but initializing state inside the component overrides the base implementation so you have to make sure that you tell the compiler that you're not actually doing anything different.

See commentary by @ferdaber here.

You often see sample code include readonly to mark props and state immutable:

type MyProps = {
  readonly message: string;
};
type MyState = {
  readonly count: number;
};

This is not necessary as React.Component<P,S> already marks them as immutable. (See PR and discussion!)

Class Methods: Do it like normal, but just remember any arguments for your functions also need to be typed:

class App extends React.Component<{ message: string }, { count: number }> {
  state = { count: 0 };
  render() {
    return (
      <div onClick={() => this.increment(1)}>
        {this.props.message} {this.state.count}
      </div>
    );
  }
  increment = (amt: number) => {
    // like this
    this.setState((state) => ({
      count: state.count + amt,
    }));
  };
}

View in the TypeScript Playground

Class Properties: If you need to declare class properties for later use, just declare it like state, but without assignment:

class App extends React.Component<{
  message: string;
}> {
  pointer: number; // like this
  componentDidMount() {
    this.pointer = 3;
  }
  render() {
    return (
      <div>
        {this.props.message} and {this.pointer}
      </div>
    );
  }
}

View in the TypeScript Playground

Something to add? File an issue.

Typing getDerivedStateFromProps

Before you start using getDerivedStateFromProps, please go through the documentation and You Probably Don't Need Derived State. Derived State can be implemented using hooks which can also help set up memoization.

Here are a few ways in which you can annotate getDerivedStateFromProps

If you have explicitly typed your derived state and want to make sure that the return value from getDerivedStateFromProps conforms to it.

class Comp extends React.Component<Props, State> {
  static getDerivedStateFromProps(
    props: Props,
    state: State
  ): Partial<State> | null {
    //
  }
}

When you want the function's return value to determine your state.

class Comp extends React.Component<
  Props,
  ReturnType<typeof Comp["getDerivedStateFromProps"]>
> {
  static getDerivedStateFromProps(props: Props) {}
}

When you want derived state with other state fields and memoization

type CustomValue = any;
interface Props {
  propA: CustomValue;
}
interface DefinedState {
  otherStateField: string;
}
type State = DefinedState & ReturnType<typeof transformPropsToState>;
function transformPropsToState(props: Props) {
  return {
    savedPropA: props.propA, // save for memoization
    derivedState: props.propA,
  };
}
class Comp extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      otherStateField: "123",
      ...transformPropsToState(props),
    };
  }
  static getDerivedStateFromProps(props: Props, state: State) {
    if (isEqual(props.propA, state.savedPropA)) return null;
    return transformPropsToState(props);
  }
}

View in the TypeScript Playground

You May Not Need `defaultProps`

As per this tweet, defaultProps will eventually be deprecated. You can check the discussions here:

Original tweet
More info can also be found in this article

The consensus is to use object default values.

Function Components:

type GreetProps = { age?: number };

const Greet = ({ age = 21 }: GreetProps) => // etc

Class Components:

type GreetProps = {
  age?: number;
};

class Greet extends React.Component<GreetProps> {
  render() {
    const { age = 21 } = this.props;
    /*...*/
  }
}

let el = <Greet age={3} />;

Typing `defaultProps`

Type inference improved greatly for defaultProps in TypeScript 3.0+, although some edge cases are still problematic.

Function Components

// using typeof as a shortcut; note that it hoists!
// you can also declare the type of DefaultProps if you choose
// e.g. https://github.com/typescript-cheatsheets/react/issues/415#issuecomment-841223219
type GreetProps = { age: number } & typeof defaultProps;

const defaultProps = {
  age: 21,
};

const Greet = (props: GreetProps) => {
  // etc
};
Greet.defaultProps = defaultProps;

See this in TS Playground

For Class components, there are a couple ways to do it (including using the Pick utility type) but the recommendation is to "reverse" the props definition:

type GreetProps = typeof Greet.defaultProps & {
  age: number;
};

class Greet extends React.Component<GreetProps> {
  static defaultProps = {
    age: 21,
  };
  /*...*/
}

// Type-checks! No type assertions needed!
let el = <Greet age={3} />;

The above implementations work fine for App creators, but sometimes you want to be able to export GreetProps so that others can consume it. The problem here is that the way GreetProps is defined, age is a required prop when it isn't because of defaultProps.

The insight to have here is that GreetProps is the internal contract for your component, not the external, consumer facing contract. You could create a separate type specifically for export, or you could make use of the React.JSX.LibraryManagedAttributes utility:

// internal contract, should not be exported out
type GreetProps = {
  age: number;
};

class Greet extends Component<GreetProps> {
  static defaultProps = { age: 21 };
}

// external contract
export type ApparentGreetProps = React.JSX.LibraryManagedAttributes<
  typeof Greet,
  GreetProps
>;

This will work properly, although hovering overApparentGreetPropsmay be a little intimidating. You can reduce this boilerplate with theComponentProps utility detailed below.

Consuming Props of a Component with defaultProps

A component with defaultProps may seem to have some required props that actually aren't.

Problem Statement

Here's what you want to do:

interface IProps {
  name: string;
}
const defaultProps = {
  age: 25,
};
const GreetComponent = ({ name, age }: IProps & typeof defaultProps) => (
  <div>{`Hello, my name is ${name}, ${age}`}</div>
);
GreetComponent.defaultProps = defaultProps;

const TestComponent = (props: React.ComponentProps<typeof GreetComponent>) => {
  return <h1 />;
};

// Property 'age' is missing in type '{ name: string; }' but required in type '{ age: number; }'
const el = <TestComponent name="foo" />;

Solution

Define a utility that applies React.JSX.LibraryManagedAttributes:

type ComponentProps<T> = T extends
  | React.ComponentType<infer P>
  | React.Component<infer P>
  ? React.JSX.LibraryManagedAttributes<T, P>
  : never;

const TestComponent = (props: ComponentProps<typeof GreetComponent>) => {
  return <h1 />;
};

// No error
const el = <TestComponent name="foo" />;

See this in TS Playground

Misc Discussions and Knowledge

You can check the discussions here:

This is just the current state and may be fixed in future.

For TypeScript 2.9 and earlier, there's more than one way to do it, but this is the best advice we've yet seen:

type Props = Required<typeof MyComponent.defaultProps> & {
  /* additional props here */
};

export class MyComponent extends React.Component<Props> {
  static defaultProps = {
    foo: "foo",
  };
}

Our former recommendation used the Partial type feature in TypeScript, which means that the current interface will fulfill a partial version on the wrapped interface. In that way we can extend defaultProps without any changes in the types!

interface IMyComponentProps {
  firstProp?: string;
  secondProp: IPerson[];
}

export class MyComponent extends React.Component<IMyComponentProps> {
  public static defaultProps: Partial<IMyComponentProps> = {
    firstProp: "default",
  };
}

The problem with this approach is it causes complex issues with the type inference working with React.JSX.LibraryManagedAttributes. Basically it causes the compiler to think that when creating a JSX expression with that component, that all of its props are optional.

See commentary by @ferdaber here and here.

Something to add? File an issue.

Typing Component Props

This is intended as a basic orientation and reference for React developers familiarizing with TypeScript.

Basic Prop Types Examples

A list of TypeScript types you will likely use in a React+TypeScript app:

type AppProps = {
  message: string;
  count: number;
  disabled: boolean;
  /** array of a type! */
  names: string[];
  /** string literals to specify exact string values, with a union type to join them together */
  status: "waiting" | "success";
  /** an object with known properties (but could have more at runtime) */
  obj: {
    id: string;
    title: string;
  };
  /** array of objects! (common) */
  objArr: {
    id: string;
    title: string;
  }[];
  /** any non-primitive value - can't access any properties (NOT COMMON but useful as placeholder) */
  obj2: object;
  /** an interface with no required properties - (NOT COMMON, except for things like `React.Component<{}, State>`) */
  obj3: {};
  /** a dict object with any number of properties of the same type */
  dict1: {
    [key: string]: MyTypeHere;
  };
  dict2: Record<string, MyTypeHere>; // equivalent to dict1
  /** function that doesn't take or return anything (VERY COMMON) */
  onClick: () => void;
  /** function with named prop (VERY COMMON) */
  onChange: (id: number) => void;
  /** function type syntax that takes an event (VERY COMMON) */
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /** alternative function type syntax that takes an event (VERY COMMON) */
  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  /** any function as long as you don't invoke it (not recommended) */
  onSomething: Function;
  /** an optional prop (VERY COMMON!) */
  optional?: OptionalType;
  /** when passing down the state setter function returned by `useState` to a child component. `number` is an example, swap out with whatever the type of your state */
  setState: React.Dispatch<React.SetStateAction<number>>;
};

`object` as the non-primitive type

object is a common source of misunderstanding in TypeScript. It does not mean "any object" but rather "any non-primitive type", which means it represents anything that is not number, bigint, string, boolean, symbol, null or undefined.

Typing "any non-primitive value" is most likely not something that you should do much in React, which means you will probably not use object much.

Empty interface, `{}` and `Object`

An empty interface, {} and Object all represent "any non-nullish value"—not "an empty object" as you might think. Using these types is a common source of misunderstanding and is not recommended.

interface AnyNonNullishValue {} // equivalent to `type AnyNonNullishValue = {}` or `type AnyNonNullishValue = Object`

let value: AnyNonNullishValue;

// these are all fine, but might not be expected
value = 1;
value = "foo";
value = () => alert("foo");
value = {};
value = { foo: "bar" };

// these are errors
value = undefined;
value = null;

Useful React Prop Type Examples

Relevant for components that accept other React components as props.

export declare interface AppProps {
  children?: React.ReactNode; // best, accepts everything React can render
  childrenElement: React.JSX.Element; // A single React element
  style?: React.CSSProperties; // to pass through style props
  onChange?: React.FormEventHandler<HTMLInputElement>; // form events! the generic parameter is the type of event.target
  //  more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroring
  props: Props & React.ComponentPropsWithoutRef<"button">; // to impersonate all the props of a button element and explicitly not forwarding its ref
  props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; // to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref
}

Before the React 18 type updates, this code typechecked but had a runtime error:

type Props = {
  children?: React.ReactNode;
};

function Comp({ children }: Props) {
  return <div>{children}</div>;
}
function App() {
  // Before React 18: Runtime error "Objects are not valid as a React child"
  // After React 18: Typecheck error "Type '{}' is not assignable to type 'ReactNode'"
  return <Comp>{{}}</Comp>;
}

This is because ReactNode includes ReactFragment which allowed type {} before React 18.

Thanks @pomle for raising this.

Quote @ferdaber: A more technical explanation is that a valid React node is not the same thing as what is returned by React.createElement. Regardless of what a component ends up rendering, React.createElement always returns an object, which is the React.JSX.Element interface, but React.ReactNode is the set of all possible return values of a component.

React.JSX.Element -> Return value of React.createElement
React.ReactNode -> Return value of a component

More discussion: Where ReactNode does not overlap with React.JSX.Element

Something to add? File an issue.

Types or Interfaces?

You can use either Types or Interfaces to type Props and State, so naturally the question arises - which do you use?

TL;DR

Use Interface until You Need Type - orta.

More Advice

Here's a helpful rule of thumb:

always use interface for public API's definition when authoring a library or 3rd party ambient type definitions, as this allows a consumer to extend them via declaration merging if some definitions are missing.
consider using type for your React Component Props and State, for consistency and because it is more constrained.

You can read more about the reasoning behind this rule of thumb in Interface vs Type alias in TypeScript 2.7.

The TypeScript Handbook now also includes guidance on Differences Between Type Aliases and Interfaces.

Note: At scale, there are performance reasons to prefer interfaces (see official Microsoft notes on this) but take this with a grain of salt

Types are useful for union types (e.g. type MyType = TypeA | TypeB) whereas Interfaces are better for declaring dictionary shapes and then implementing or extending them.

Useful table for Types vs Interfaces

It's a nuanced topic, don't get too hung up on it. Here's a handy table:

Aspect	Type	Interface
Can describe functions	✅	✅
Can describe constructors	✅	✅
Can describe tuples	✅	✅
Interfaces can extend it	⚠️	✅
Classes can extend it	🚫	✅
Classes can implement it (`implements`)	⚠️	✅
Can intersect another one of its kind	✅	⚠️
Can create a union with another one of its kind	✅	🚫
Can be used to create mapped types	✅	🚫
Can be mapped over with mapped types	✅	✅
Expands in error messages and logs	✅	🚫
Can be augmented	🚫	✅
Can be recursive	⚠️	✅

⚠️ In some cases

(source: Karol Majewski)

Something to add? File an issue.

getDerivedStateFromProps

Before you start using getDerivedStateFromProps, please go through the documentation and You Probably Don't Need Derived State. Derived State can be easily achieved using hooks which can also help set up memoization easily.

Here are a few ways in which you can annotate getDerivedStateFromProps

If you have explicitly typed your derived state and want to make sure that the return value from getDerivedStateFromProps conforms to it.

class Comp extends React.Component<Props, State> {
  static getDerivedStateFromProps(
    props: Props,
    state: State
  ): Partial<State> | null {
    //
  }
}

When you want the function's return value to determine your state.

class Comp extends React.Component<
  Props,
  ReturnType<typeof Comp["getDerivedStateFromProps"]>
> {
  static getDerivedStateFromProps(props: Props) {}
}

When you want derived state with other state fields and memoization

type CustomValue = any;
interface Props {
  propA: CustomValue;
}
interface DefinedState {
  otherStateField: string;
}
type State = DefinedState & ReturnType<typeof transformPropsToState>;
function transformPropsToState(props: Props) {
  return {
    savedPropA: props.propA, // save for memoization
    derivedState: props.propA,
  };
}
class Comp extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      otherStateField: "123",
      ...transformPropsToState(props),
    };
  }
  static getDerivedStateFromProps(props: Props, state: State) {
    if (isEqual(props.propA, state.savedPropA)) return null;
    return transformPropsToState(props);
  }
}

View in the TypeScript Playground

Forms and Events

If performance is not an issue (and it usually isn't!), inlining handlers is easiest as you can just use type inference and contextual typing:

const el = (
  <button
    onClick={(event) => {
      /* event will be correctly typed automatically! */
    }}
  />
);

But if you need to define your event handler separately, IDE tooling really comes in handy here, as the @type definitions come with a wealth of typing. Type what you are looking for and usually the autocomplete will help you out. Here is what it looks like for an onChange for a form event:

type State = {
  text: string;
};
class App extends React.Component<Props, State> {
  state = {
    text: "",
  };

  // typing on RIGHT hand side of =
  onChange = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({ text: e.currentTarget.value });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.text} onChange={this.onChange} />
      </div>
    );
  }
}

View in the TypeScript Playground

Instead of typing the arguments and return values with React.FormEvent<> and void, you may alternatively apply types to the event handler itself (contributed by @TomasHubelbauer):

  // typing on LEFT hand side of =
  onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    this.setState({text: e.currentTarget.value})
  }

The first method uses an inferred method signature (e: React.FormEvent<HTMLInputElement>): void and the second method enforces a type of the delegate provided by @types/react. So React.ChangeEventHandler<> is simply a "blessed" typing by @types/react, whereas you can think of the inferred method as more... artisanally hand-rolled. Either way it's a good pattern to know. See our Github PR for more.

Typing onSubmit, with Uncontrolled components in a Form

If you don't quite care about the type of the event, you can just use React.SyntheticEvent. If your target form has custom named inputs that you'd like to access, you can use a type assertion:

<form
  ref={formRef}
  onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
    const target = e.target as typeof e.target & {
      email: { value: string };
      password: { value: string };
    };
    const email = target.email.value; // typechecks!
    const password = target.password.value; // typechecks!
    // etc...
  }}
>
  <div>
    <label>
      Email:
      <input type="email" name="email" />
    </label>
  </div>
  <div>
    <label>
      Password:
      <input type="password" name="password" />
    </label>
  </div>
  <div>
    <input type="submit" value="Log in" />
  </div>
</form>

View in the TypeScript Playground

Of course, if you're making any sort of significant form, you should use Formik or React Hook Form, which are written in TypeScript.

List of event types

Event Type	Description
AnimationEvent	CSS Animations.
ChangeEvent	Changing the value of `<input>`, `<select>` and `<textarea>` element.
ClipboardEvent	Using copy, paste and cut events.
CompositionEvent	Events that occur due to the user indirectly entering text (e.g. depending on Browser and PC setup, a popup window may appear with additional characters if you e.g. want to type Japanese on a US Keyboard)
DragEvent	Drag and drop interaction with a pointer device (e.g. mouse).
FocusEvent	Event that occurs when elements gets or loses focus.
FormEvent	Event that occurs whenever a form or form element gets/loses focus, a form element value is changed or the form is submitted.
InvalidEvent	Fired when validity restrictions of an input fails (e.g `<input type="number" max="10">` and someone would insert number 20).
KeyboardEvent	User interaction with the keyboard. Each event describes a single key interaction.
MouseEvent	Events that occur due to the user interacting with a pointing device (e.g. mouse)
PointerEvent	Events that occur due to user interaction with a variety pointing of devices such as mouse, pen/stylus, a touchscreen and which also supports multi-touch. Unless you develop for older browsers (IE10 or Safari 12), pointer events are recommended. Extends UIEvent.
TouchEvent	Events that occur due to the user interacting with a touch device. Extends UIEvent.
TransitionEvent	CSS Transition. Not fully browser supported. Extends UIEvent
UIEvent	Base Event for Mouse, Touch and Pointer events.
WheelEvent	Scrolling on a mouse wheel or similar input device. (Note: `wheel` event should not be confused with the `scroll` event)
SyntheticEvent	The base event for all above events. Should be used when unsure about event type

You've probably noticed that there is no InputEvent. This is because it is not supported by Typescript as the event itself has no fully browser support and may behave differently in different browsers. You can use KeyboardEvent instead.

Sources:

Context

Basic example

Here's a basic example of creating a context containing the active theme.

import { createContext } from "react";

type ThemeContextType = "light" | "dark";

const ThemeContext = createContext<ThemeContextType>("light");

Wrap the components that need the context with a context provider:

import { useState } from "react";

const App = () => {
  const [theme, setTheme] = useState<ThemeContextType>("light");

  return (
    <ThemeContext.Provider value={theme}>
      <MyComponent />
    </ThemeContext.Provider>
  );
};

Call useContext to read and subscribe to the context.

import { useContext } from "react";

const MyComponent = () => {
  const theme = useContext(ThemeContext);

  return <p>The current theme is {theme}.</p>;
};

Without default context value

If you don't have any meaningful default value, specify null:

import { createContext } from "react";

interface CurrentUserContextType {
  username: string;
}

const CurrentUserContext = createContext<CurrentUserContextType | null>(null);

const App = () => {
  const [currentUser, setCurrentUser] = useState<CurrentUserContextType>({
    username: "filiptammergard",
  });

  return (
    <CurrentUserContext.Provider value={currentUser}>
      <MyComponent />
    </CurrentUserContext.Provider>
  );
};

Now that the type of the context can be null, you'll notice that you'll get a 'currentUser' is possibly 'null' TypeScript error if you try to access the username property. You can use optional chaining to access username:

import { useContext } from "react";

const MyComponent = () => {
  const currentUser = useContext(CurrentUserContext);

  return <p>Name: {currentUser?.username}.</p>;
};

However, it would be preferable to not have to check for null, since we know that the context won't be null. One way to do that is to provide a custom hook to use the context, where an error is thrown if the context is not provided:

import { createContext } from "react";

interface CurrentUserContextType {
  username: string;
}

const CurrentUserContext = createContext<CurrentUserContextType | null>(null);

const useCurrentUser = () => {
  const currentUserContext = useContext(CurrentUserContext);

  if (!currentUserContext) {
    throw new Error(
      "useCurrentUser has to be used within <CurrentUserContext.Provider>"
    );
  }

  return currentUserContext;
};

Using a runtime type check in this will has the benefit of printing a clear error message in the console when a provider is not wrapping the components properly. Now it's possible to access currentUser.username without checking for null:

import { useContext } from "react";

const MyComponent = () => {
  const currentUser = useCurrentUser();

  return <p>Username: {currentUser.username}.</p>;
};

Type assertion as an alternative

Another way to avoid having to check for null is to use type assertion to tell TypeScript you know the context is not null:

import { useContext } from "react";

const MyComponent = () => {
  const currentUser = useContext(CurrentUserContext);

  return <p>Name: {currentUser!.username}.</p>;
};

Another option is to use an empty object as default value and cast it to the expected context type:

const CurrentUserContext = createContext<CurrentUserContextType>(
  {} as CurrentUserContextType
);

You can also use non-null assertion to get the same result:

const CurrentUserContext = createContext<CurrentUserContextType>(null!);

When you don't know what to choose, prefer runtime checking and throwing over type asserting.

forwardRef/createRef

Check the Hooks section for useRef.

createRef:

import { createRef, PureComponent } from "react";

class CssThemeProvider extends PureComponent<Props> {
  private rootRef = createRef<HTMLDivElement>(); // like this
  render() {
    return <div ref={this.rootRef}>{this.props.children}</div>;
  }
}

forwardRef:

import { forwardRef, ReactNode } from "react";

interface Props {
  children?: ReactNode;
  type: "submit" | "button";
}
export type Ref = HTMLButtonElement;

export const FancyButton = forwardRef<Ref, Props>((props, ref) => (
  <button ref={ref} className="MyClassName" type={props.type}>
    {props.children}
  </button>
));

This was done on purpose. You can make it immutable if you have to - assign React.Ref if you want to ensure nobody reassigns it:

import { forwardRef, ReactNode, Ref } from "react";

interface Props {
  children?: ReactNode;
  type: "submit" | "button";
}

export const FancyButton = forwardRef(
  (
    props: Props,
    ref: Ref<HTMLButtonElement> // <-- here!
  ) => (
    <button ref={ref} className="MyClassName" type={props.type}>
      {props.children}
    </button>
  )
);

If you are grabbing the props of a component that forwards refs, use ComponentPropsWithRef.

Generic forwardRefs

Option 1 - Wrapper component

type ClickableListProps<T> = {
  items: T[];
  onSelect: (item: T) => void;
  mRef?: React.Ref<HTMLUListElement> | null;
};

export function ClickableList<T>(props: ClickableListProps<T>) {
  return (
    <ul ref={props.mRef}>
      {props.items.map((item, i) => (
        <li key={i}>
          <button onClick={(el) => props.onSelect(item)}>Select</button>
          {item}
        </li>
      ))}
    </ul>
  );
}

Option 2 - Redeclare forwardRef

// Redeclare forwardRef
declare module "react" {
  function forwardRef<T, P = {}>(
    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
}

// Just write your components like you're used to!
import { forwardRef, ForwardedRef } from "react";

interface ClickableListProps<T> {
  items: T[];
  onSelect: (item: T) => void;
}

function ClickableListInner<T>(
  props: ClickableListProps<T>,
  ref: ForwardedRef<HTMLUListElement>
) {
  return (
    <ul ref={ref}>
      {props.items.map((item, i) => (
        <li key={i}>
          <button onClick={(el) => props.onSelect(item)}>Select</button>
          {item}
        </li>
      ))}
    </ul>
  );
}

export const ClickableList = forwardRef(ClickableListInner);

Option 3 - Call signature

// Add to `index.d.ts`
interface ForwardRefWithGenerics extends React.FC<WithForwardRefProps<Option>> {
  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
    React.FC<WithForwardRefProps<T>>
  >;
}

export const ClickableListWithForwardRef: ForwardRefWithGenerics =
  forwardRef(ClickableList);

Credits: https://stackoverflow.com/a/73795494

More Info

https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315

You may also wish to do Conditional Rendering with forwardRef.

Something to add? File an issue.

Portals

Using ReactDOM.createPortal:

const modalRoot = document.getElementById("modal-root") as HTMLElement;
// assuming in your html file has a div with id 'modal-root';

export class Modal extends React.Component<{ children?: React.ReactNode }> {
  el: HTMLElement = document.createElement("div");

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.el);
  }
}

View in the TypeScript Playground

Same as above but using hooks

import { useEffect, useRef, ReactNode } from "react";
import { createPortal } from "react-dom";

const modalRoot = document.querySelector("#modal-root") as HTMLElement;

type ModalProps = {
  children: ReactNode;
};

function Modal({ children }: ModalProps) {
  // create div element only once using ref
  const elRef = useRef<HTMLDivElement | null>(null);
  if (!elRef.current) elRef.current = document.createElement("div");

  useEffect(() => {
    const el = elRef.current!; // non-null assertion because it will never be null
    modalRoot.appendChild(el);
    return () => {
      modalRoot.removeChild(el);
    };
  }, []);

  return createPortal(children, elRef.current);
}

View in the TypeScript Playground

Modal Component Usage Example:

import { useState } from "react";

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      // you can also put this in your static html file
      <div id="modal-root"></div>
      {showModal && (
        <Modal>
          <div
            style={{
              display: "grid",
              placeItems: "center",
              height: "100vh",
              width: "100vh",
              background: "rgba(0,0,0,0.1)",
              zIndex: 99,
            }}
          >
            I'm a modal!{" "}
            <button
              style={{ background: "papyawhip" }}
              onClick={() => setShowModal(false)}
            >
              close
            </button>
          </div>
        </Modal>
      )}
      <button onClick={() => setShowModal(true)}>show Modal</button>
      // rest of your app
    </div>
  );
}

This example is based on the Event Bubbling Through Portal example of React docs.

Error Boundaries

Option 1: Using react-error-boundary

React-error-boundary - is a lightweight package ready to use for this scenario with TS support built-in. This approach also lets you avoid class components that are not that popular anymore.

Option 2: Writing your custom error boundary component

If you don't want to add a new npm package for this, you can also write your own ErrorBoundary component.

import React, { Component, ErrorInfo, ReactNode } from "react";

interface Props {
  children?: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false
  };

  public static getDerivedStateFromError(_: Error): State {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return <h1>Sorry.. there was an error</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Something to add? File an issue.

Concurrent React/React Suspense

Not written yet. watch https://github.com/sw-yx/fresh-async-react for more on React Suspense and Time Slicing.

Something to add? File an issue.

Troubleshooting Handbook: Types

⚠️ Have you read the TypeScript FAQ Your answer might be there!

Facing weird type errors? You aren't alone. This is the hardest part of using TypeScript with React. Be patient - you are learning a new language after all. However, the more you get good at this, the less time you'll be working against the compiler and the more the compiler will be working for you!

Try to avoid typing with any as much as possible to experience the full benefits of TypeScript. Instead, let's try to be familiar with some of the common strategies to solve these issues.

Union Types and Type Guarding

Union types are handy for solving some of these typing problems:

class App extends React.Component<
  {},
  {
    count: number | null; // like this
  }
> {
  state = {
    count: null,
  };
  render() {
    return <div onClick={() => this.increment(1)}>{this.state.count}</div>;
  }
  increment = (amt: number) => {
    this.setState((state) => ({
      count: (state.count || 0) + amt,
    }));
  };
}

View in the TypeScript Playground

Type Guarding: Sometimes Union Types solve a problem in one area but create another downstream. If A and B are both object types, A | B isn't "either A or B", it is "A or B or both at once", which causes some confusion if you expected it to be the former. Learn how to write checks, guards, and assertions (also see the Conditional Rendering section below). For example:

interface Admin {
  role: string;
}
interface User {
  email: string;
}

// Method 1: use `in` keyword
function redirect(user: Admin | User) {
  if ("role" in user) {
    // use the `in` operator for typeguards since TS 2.7+
    routeToAdminPage(user.role);
  } else {
    routeToHomePage(user.email);
  }
}

// Method 2: custom type guard, does the same thing in older TS versions or where `in` isnt enough
function isAdmin(user: Admin | User): user is Admin {
  return (user as any).role !== undefined;
}

View in the TypeScript Playground

Method 2 is also known as User-Defined Type Guards and can be really handy for readable code. This is how TS itself refines types with typeof and instanceof.

If you need if...else chains or the switch statement instead, it should "just work", but look up Discriminated Unions if you need help. (See also: Basarat's writeup). This is handy in typing reducers for useReducer or Redux.

Optional Types

If a component has an optional prop, add a question mark and assign during destructure (or use defaultProps).

class MyComponent extends React.Component<{
  message?: string; // like this
}> {
  render() {
    const { message = "default" } = this.props;
    return <div>{message}</div>;
  }
}

You can also use a ! character to assert that something is not undefined, but this is not encouraged.

Something to add? File an issue with your suggestions!

Enum Types

We recommend avoiding using enums as far as possible.

Enums have a few documented issues (the TS team agrees). A simpler alternative to enums is just declaring a union type of string literals:

export declare type Position = "left" | "right" | "top" | "bottom";

If you must use enums, remember that enums in TypeScript default to numbers. You will usually want to use them as strings instead:

export enum ButtonSizes {
  default = "default",
  small = "small",
  large = "large",
}

// usage
export const PrimaryButton = (
  props: Props & React.HTMLProps<HTMLButtonElement>
) => <Button size={ButtonSizes.default} {...props} />;

Type Assertion

Sometimes you know better than TypeScript that the type you're using is narrower than it thinks, or union types need to be asserted to a more specific type to work with other APIs, so assert with the as keyword. This tells the compiler you know better than it does.

class MyComponent extends React.Component<{
  message: string;
}> {
  render() {
    const { message } = this.props;
    return (
      <Component2 message={message as SpecialMessageType}>{message}</Component2>
    );
  }
}

View in the TypeScript Playground

Note that you cannot assert your way to anything - basically it is only for refining types. Therefore it is not the same as "casting" a type.

You can also assert a property is non-null, when accessing it:

element.parentNode!.removeChild(element); // ! before the period
myFunction(document.getElementById(dialog.id!)!); // ! after the property accessing
let userID!: string; // definite assignment assertion... be careful!

Of course, try to actually handle the null case instead of asserting :)

Simulating Nominal Types

TS' structural typing is handy, until it is inconvenient. However you can simulate nominal typing with type branding:

type OrderID = string & { readonly brand: unique symbol };
type UserID = string & { readonly brand: unique symbol };
type ID = OrderID | UserID;

We can create these values with the Companion Object Pattern:

function OrderID(id: string) {
  return id as OrderID;
}
function UserID(id: string) {
  return id as UserID;
}

Now TypeScript will disallow you from using the wrong ID in the wrong place:

function queryForUser(id: UserID) {
  // ...
}
queryForUser(OrderID("foobar")); // Error, Argument of type 'OrderID' is not assignable to parameter of type 'UserID'

In future you can use the unique keyword to brand. See this PR.

Intersection Types

Adding two types together can be handy, for example when your component is supposed to mirror the props of a native component like a button:

export interface PrimaryButtonProps {
  label: string;
}
export const PrimaryButton = (
  props: PrimaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
) => {
  // do custom buttony stuff
  return <button {...props}> {props.label} </button>;
};

Playground here

You can also use Intersection Types to make reusable subsets of props for similar components:

type BaseProps = {
   className?: string,
   style?: React.CSSProperties
   name: string // used in both
}
type DogProps = {
  tailsCount: number
}
type HumanProps = {
  handsCount: number
}
export const Human = (props: BaseProps & HumanProps) => // ...
export const Dog = (props: BaseProps & DogProps) => // ...

View in the TypeScript Playground

Make sure not to confuse Intersection Types (which are and operations) with Union Types (which are or operations).

Union Types

This section is yet to be written (please contribute!). Meanwhile, see our commentary on Union Types usecases.

The ADVANCED cheatsheet also has information on Discriminated Union Types, which are helpful when TypeScript doesn't seem to be narrowing your union type as you expect.

Overloading Function Types

Specifically when it comes to functions, you may need to overload instead of union type. The most common way function types are written uses the shorthand:

type FunctionType1 = (x: string, y: number) => number;

But this doesn't let you do any overloading. If you have the implementation, you can put them after each other with the function keyword:

function pickCard(x: { suit: string; card: number }[]): number;
function pickCard(x: number): { suit: string; card: number };
function pickCard(x): any {
  // implementation with combined signature
  // ...
}

However, if you don't have an implementation and are just writing a .d.ts definition file, this won't help you either. In this case you can forego any shorthand and write them the old-school way. The key thing to remember here is as far as TypeScript is concerned, functions are just callable objects with no key:

type pickCard = {
  (x: { suit: string; card: number }[]): number;
  (x: number): { suit: string; card: number };
  // no need for combined signature in this form
  // you can also type static properties of functions here eg `pickCard.wasCalled`
};

Note that when you implement the actual overloaded function, the implementation will need to declare the combined call signature that you'll be handling, it won't be inferred for you. You can readily see examples of overloads in DOM APIs, e.g. createElement.

Using Inferred Types

Leaning on TypeScript's Type Inference is great... until you realize you need a type that was inferred, and have to go back and explicitly declare types/interfaces so you can export them for reuse.

Fortunately, with typeof, you won't have to do that. Just use it on any value:

const [state, setState] = useState({
  foo: 1,
  bar: 2,
}); // state's type inferred to be {foo: number, bar: number}

const someMethod = (obj: typeof state) => {
  // grabbing the type of state even though it was inferred
  // some code using obj
  setState(obj); // this works
};

Using Partial Types

Working with slicing state and props is common in React. Again, you don't really have to go and explicitly redefine your types if you use the Partial generic type:

const [state, setState] = useState({
  foo: 1,
  bar: 2,
}); // state's type inferred to be {foo: number, bar: number}

// NOTE: stale state merging is not actually encouraged in useState
// we are just demonstrating how to use Partial here
const partialStateUpdate = (obj: Partial<typeof state>) =>
  setState({ ...state, ...obj });

// later on...
partialStateUpdate({ foo: 2 }); // this works

Note that there are some TS users who don't agree with using Partial as it behaves today. See subtle pitfalls of the above example here, and check out this long discussion on why @types/react uses Pick instead of Partial.

The Types I need weren't exported!

This can be annoying but here are ways to grab the types!

Grabbing the Prop types of a component: Use React.ComponentProps and typeof, and optionally Omit any overlapping types

import { Button } from "library"; // but doesn't export ButtonProps! oh no!
type ButtonProps = React.ComponentProps<typeof Button>; // no problem! grab your own!
type AlertButtonProps = Omit<ButtonProps, "onClick">; // modify
const AlertButton = (props: AlertButtonProps) => (
  <Button onClick={() => alert("hello")} {...props} />
);

You may also use ComponentPropsWithoutRef (instead of ComponentProps) and ComponentPropsWithRef (if your component specifically forwards refs)

Grabbing the return type of a function: use ReturnType:

// inside some library - return type { baz: number } is inferred but not exported
function foo(bar: string) {
  return { baz: 1 };
}

//  inside your app, if you need { baz: number }
type FooReturn = ReturnType<typeof foo>; // { baz: number }

In fact you can grab virtually anything public: see this blogpost from Ivan Koshelev

function foo() {
  return {
    a: 1,
    b: 2,
    subInstArr: [
      {
        c: 3,
        d: 4,
      },
    ],
  };
}

type InstType = ReturnType<typeof foo>;
type SubInstArr = InstType["subInstArr"];
type SubInstType = SubInstArr[0];

let baz: SubInstType = {
  c: 5,
  d: 6, // type checks ok!
};

//You could just write a one-liner,
//But please make sure it is forward-readable
//(you can understand it from reading once left-to-right with no jumps)
type SubInstType2 = ReturnType<typeof foo>["subInstArr"][0];
let baz2: SubInstType2 = {
  c: 5,
  d: 6, // type checks ok!
};

TS also ships with a Parameters utility type for extracting the parameters of a function
for anything more "custom", the infer keyword is the basic building block for this, but takes a bit of getting used to. Look at the source code for the above utility types, and this example to get the idea. Basarat also has a good video on infer.

The Types I need don't exist!

What's more annoying than modules with unexported types? Modules that are untyped!

Before you proceed - make sure you have checked that types don't exist in DefinitelyTyped or TypeSearch

Fret not! There are more than a couple of ways in which you can solve this problem.

Slapping `any` on everything

A lazier way would be to create a new type declaration file, say typedec.d.ts– if you don't already have one. Ensure that the path to file is resolvable by TypeScript by checking the include array in the tsconfig.json file at the root of your directory.

// inside tsconfig.json
{
  // ...
  "include": [
    "src" // automatically resolves if the path to declaration is src/typedec.d.ts
  ]
  // ...
}

Within this file, add the declare syntax for your desired module, say my-untyped-module– to the declaration file:

// inside typedec.d.ts
declare module "my-untyped-module";

This one-liner alone is enough if you just need it to work without errors. A even hackier, write-once-and-forget way would be to use "*" instead which would then apply the Any type for all existing and future untyped modules.

This solution works well as a workaround if you have less than a couple untyped modules. Anything more, you now have a ticking type-bomb in your hands. The only way of circumventing this problem would be to define the missing types for those untyped modules as explained in the following sections.

Autogenerate types

You can use TypeScript with --allowJs and --declaration to see TypeScript's "best guess" at the types of the library.

If this doesn't work well enough, use dts-gen to use the runtime shape of the object to accurately enumerate all available properties. This tends to be very accurate, BUT the tool does not yet support scraping JSDoc comments to populate additional types.

npm install -g dts-gen
dts-gen -m <your-module>

There are other automated JS to TS conversion tools and migration strategies - see our MIGRATION cheatsheet.

Typing Exported Hooks

Typing Hooks is just like typing pure functions.

The following steps work under two assumptions:

You have already created a type declaration file as stated earlier in the section.
You have access to the source code - specifically the code that directly exports the functions you will be using. In most cases, it would be housed in an index.js file. Typically you need a minimum of two type declarations (one for Input Prop and the other for Return Prop) to define a hook completely. Suppose the hook you wish to type follows the following structure,

// ...
const useUntypedHook = (prop) => {
  // some processing happens here
  return {
    /* ReturnProps */
  };
};
export default useUntypedHook;

then, your type declaration should most likely follow the following syntax.

declare module 'use-untyped-hook' {
  export interface InputProps { ... }   // type declaration for prop
  export interface ReturnProps { ... } // type declaration for return props
  export default function useUntypedHook(
    prop: InputProps
    // ...
  ): ReturnProps;
}

// inside src/index.js
const useDarkMode = (
  initialValue = false, // -> input props / config props to be exported
  {
    // -> input props / config props to be exported
    element,
    classNameDark,
    classNameLight,
    onChange,
    storageKey = "darkMode",
    storageProvider,
    global,
  } = {}
) => {
  // ...
  return {
    // -> return props to be exported
    value: state,
    enable: useCallback(() => setState(true), [setState]),
    disable: useCallback(() => setState(false), [setState]),
    toggle: useCallback(() => setState((current) => !current), [setState]),
  };
};
export default useDarkMode;

As the comments suggest, exporting these config props and return props following the aforementioned structure will result in the following type export.

declare module "use-dark-mode" {
  /**
   * A config object allowing you to specify certain aspects of `useDarkMode`
   */
  export interface DarkModeConfig {
    classNameDark?: string; // A className to set "dark mode". Default = "dark-mode".
    classNameLight?: string; // A className to set "light mode". Default = "light-mode".
    element?: HTMLElement; // The element to apply the className. Default = `document.body`
    onChange?: (val?: boolean) => void; // Override the default className handler with a custom callback.
    storageKey?: string; // Specify the `localStorage` key. Default = "darkMode". Set to `null` to disable persistent storage.
    storageProvider?: WindowLocalStorage; // A storage provider. Default = `localStorage`.
    global?: Window; // The global object. Default = `window`.
  }
  /**
   * An object returned from a call to `useDarkMode`.
   */
  export interface DarkMode {
    readonly value: boolean;
    enable: () => void;
    disable: () => void;
    toggle: () => void;
  }
  /**
   * A custom React Hook to help you implement a "dark mode" component for your application.
   */
  export default function useDarkMode(
    initialState?: boolean,
    config?: DarkModeConfig
  ): DarkMode;
}

Typing Exported Components

In case of typing untyped class components, there's almost no difference in approach except for the fact that after declaring the types, you export the extend the type using class UntypedClassComponent extends React.Component<UntypedClassComponentProps, any> {} where UntypedClassComponentProps holds the type declaration.

For instance, sw-yx's Gist on React Router 6 types implemented a similar method for typing the then untyped RR6.

declare module "react-router-dom" {
  import * as React from 'react';
  // ...
  type NavigateProps<T> = {
    to: string | number,
    replace?: boolean,
    state?: T
  }
  //...
  export class Navigate<T = any> extends React.Component<NavigateProps<T>>{}
  // ...

For more information on creating type definitions for class components, you can refer to this post for reference.

Frequent Known Problems with TypeScript

Just a list of stuff that React developers frequently run into, that TS has no solution for. Not necessarily TSX only.

TypeScript doesn't narrow after an object element null check

Ref: https://mobile.twitter.com/tannerlinsley/status/1390409931627499523. see also https://github.com/microsoft/TypeScript/issues/9998

TypeScript doesn't let you restrict the type of children

Guaranteeing typesafety for this kind of API isn't possible:

<Menu>
  <MenuItem/> {/* ok */}
  <MenuLink/> {/* ok */}
  <div> {/* error */}
</Menu>

Source: https://twitter.com/ryanflorence/status/1085745787982700544?s=20

Troubleshooting Handbook: Operators

typeof and instanceof: type query used for refinement
keyof: get keys of an object. keyof T is an operator to tell you what values of k can be used for obj[k].
- Some misconceptions here.
O[K]: property lookup
[K in O]: mapped types
+ or - or readonly or ?: addition and subtraction and readonly and optional modifiers
x ? Y : Z: Conditional types for generic types, type aliases, function parameter types
!: Nonnull assertion for nullable types
=: Generic type parameter default for generic types
as: type assertion
is: type guard for function return types

Conditional Types are a difficult topic to get around so here are some extra resources:

fully walked through explanation https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/
Bailing out and other advanced topics https://github.com/sw-yx/ts-spec/blob/master/conditional-types.md
Basarat's video https://www.youtube.com/watch?v=SbVgPQDealg&list=PLYvdvJlnTOjF6aJsWWAt7kZRJvzw-en8B&index=2&t=0s
Generics, Conditional types and Mapped types

Troubleshooting Handbook: Utilities

These are all built in, see source in es5.d.ts:

Awaited: emulate the behavior of await
Capitalize: convert first character of string literal type to uppercase
ConstructorParameters: a tuple of class constructor's parameter types
Exclude: exclude a type from another type
Extract: select a subtype that is assignable to another type
InstanceType: the instance type you get from a newing a class constructor
Lowercase: convert string literal type to lowercase
NonNullable: exclude null and undefined from a type
Omit: construct a type with the properties of another type.
OmitThisParameter: remove the 'this' parameter from a function type.
Parameters: a tuple of a function's parameter types
Partial: Make all properties in an object optional
Readonly: Make all properties in an object readonly
ReadonlyArray: Make an immutable array of the given type
Pick: A subtype of an object type with a subset of its keys
Record: A map from a key type to a value type
Required: Make all properties in an object required
ReturnType: A function's return type
ThisParameterType: extract the type of the 'this' parameter of a function type
ThisType: marker for contextual 'this' type
Uncapitalize: convert first character of string literal type to lowercase
Uppercase: convert string literal type to uppercase

Troubleshooting Handbook: tsconfig.json

You can find all the Compiler options in the TypeScript docs. The new TS docs also has per-flag annotations of what each does. This is the setup I roll with for APPS (not libraries - for libraries you may wish to see the settings we use in tsdx):

{
  "compilerOptions": {
    "incremental": true,
    "outDir": "build/lib",
    "target": "es5",
    "module": "esnext",
    "lib": ["DOM", "ESNext"],
    "sourceMap": true,
    "importHelpers": true,
    "declaration": true,
    "rootDir": "src",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "baseUrl": "src",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build", "scripts"]
}

You can find more recommended TS config here.

Please open an issue and discuss if there are better recommended choices for React.

Selected flags and why we like them:

esModuleInterop: disables namespace imports (import * as foo from "foo") and enables CJS/AMD/UMD style imports (import fs from "fs")
strict: strictPropertyInitialization forces you to initialize class properties or explicitly declare that they can be undefined. You can opt out of this with a definite assignment assertion.
"typeRoots": ["./typings", "./node_modules/@types"]: By default, TypeScript looks in node_modules/@types and parent folders for third party type declarations. You may wish to override this default resolution so you can put all your global type declarations in a special typings folder.

Compilation time grows linearly with size of codebase. For large projects, you will want to use Project References. See our ADVANCED cheatsheet for commentary.

Troubleshooting Handbook: Fixing bugs in official typings

If you run into bugs with your library's official typings, you can copy them locally and tell TypeScript to use your local version using the "paths" field. In your tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "mobx-react": ["../typings/modules/mobx-react"]
    }
  }
}

Thanks to @adamrackis for the tip.

If you just need to add an interface, or add missing members to an existing interface, you don't need to copy the whole typing package. Instead, you can use declaration merging:

// my-typings.ts
declare module "plotly.js" {
  interface PlotlyHTMLElement {
    removeAllListeners(): void;
  }
}

// MyComponent.tsx
import { PlotlyHTMLElement } from "plotly.js";

const f = (e: PlotlyHTMLElement) => {
  e.removeAllListeners();
};

You don't always have to implement the module, you can simply import the module as any for a quick start:

// my-typings.ts
declare module "plotly.js"; // each of its imports are `any`

Because you don't have to explicitly import this, this is known as an ambient module declaration. You can do AMD's in a script-mode .ts file (no imports or exports), or a .d.ts file anywhere in your project.

You can also do ambient variable and ambient type declarations:

// ambient utility type
type ToArray<T> = T extends unknown[] ? T : T[];
// ambient variable
declare let process: {
  env: {
    NODE_ENV: "development" | "production";
  };
};
process = {
  env: {
    NODE_ENV: "production",
  },
};

You can see examples of these included in the built in type declarations in the lib field of tsconfig.json

Troubleshooting Handbook: Globals, Images and other non-TS files

Use declaration merging.

If, say, you are using a third party JS script that attaches on to the window global, you can extend Window:

declare global {
  interface Window {
    MyVendorThing: MyVendorType;
  }
}

Likewise if you wish to "import" an image or other non TS/TSX file:

// declaration.d.ts
// anywhere in your project, NOT the same name as any of your .ts/tsx files
declare module "*.png";

// importing in a tsx file
import * as logo from "./logo.png";

Note that tsc cannot bundle these files for you, you will have to use Webpack or Parcel.

Editor Tooling and Integration

VSCode
- swyx's VSCode Extension: https://github.com/sw-yx/swyx-react-typescript-snippets
- amVim: https://marketplace.visualstudio.com/items?itemName=auiworks.amvim
VIM
- https://github.com/Quramy/tsuquyomi
- nvim-typescript?
- https://github.com/leafgarland/typescript-vim
- peitalin/vim-jsx-typescript
- NeoVim: https://github.com/neoclide/coc.nvim
- other discussion: https://mobile.twitter.com/ryanflorence/status/1085715595994095620

You are free to use this repo's TSX logo if you wish:

You may also wish to use alternative logos - jsx-tsx-logos

Linting

⚠️Note that TSLint is now in maintenance and you should try to use ESLint instead. If you are interested in TSLint tips, please check this PR from @azdanov. The rest of this section just focuses on ESLint. You can convert TSlint to ESlint with this tool.

⚠️This is an evolving topic. typescript-eslint-parser is no longer maintained and work has recently begun on typescript-eslint in the ESLint community to bring ESLint up to full parity and interop with TSLint.

Follow the TypeScript + ESLint docs at https://github.com/typescript-eslint/typescript-eslint:

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint

add a lint script to your package.json:

  "scripts": {
    "lint": "eslint 'src/**/*.ts'"
  },

and a suitable .eslintrc.js (using .js over .json here so we can add comments):

module.exports = {
  env: {
    es6: true,
    node: true,
    jest: true,
  },
  extends: "eslint:recommended",
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: "module",
  },
  rules: {
    indent: ["error", 2],
    "linebreak-style": ["error", "unix"],
    quotes: ["error", "single"],
    "no-console": "warn",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      { vars: "all", args: "after-used", ignoreRestSiblings: false },
    ],
    "@typescript-eslint/explicit-function-return-type": "warn", // Consider using explicit annotations for object literals and function return types even when they can be inferred.
    "no-empty": "warn",
  },
};

Most of this is taken from the tsdx PR which is for libraries.

More .eslintrc.json options to consider with more options you may want for apps:

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react",
    "plugin:prettier/recommended",
    "plugin:jest/recommended",
    "plugin:unicorn/recommended"
  ],
  "plugins": ["prettier", "jest", "unicorn"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "jest": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "parser": "typescript-eslint-parser",
      "rules": {
        "no-undef": "off"
      }
    }
  ]
}

Another great resource is "Using ESLint and Prettier in a TypeScript Project" by @robertcoopercode.

Wes Bos is also working on TypeScript support for his eslint+prettier config.

If you're looking for information on Prettier, check out the Prettier guide.

Other React + TypeScript resources

me! https://twitter.com/swyx
https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/
https://github.com/piotrwitek/react-redux-typescript-guide - HIGHLY HIGHLY RECOMMENDED, i wrote this repo before knowing about this one, this has a lot of stuff I don't cover, including REDUX and JEST.
10 Bad TypeScript Habits:
1. not using "strict": true
2. using || for default values when we have ??
3. Using any instead of unknown for API responses
4. using as assertion instead of Type Guards (function isFoo(obj: unknown): obj is Foo {})
5. as any in tests
6. Marking optional properties instead of modeling which combinations exist by extending interfaces
7. One letter generics
8. Non-boolean if (nonboolean) checks
9. bangbang checks if (!!nonboolean)
10. != null to check for null and undefined
Ultimate React Component Patterns with TypeScript 2.8
Basarat's TypeScript gitbook has a React section with an Egghead.io course as well.
Palmer Group's TypeScript + React Guidelines as well as Jared's other work like disco.chat
Sindre Sorhus' TypeScript Style Guide
TypeScript React Starter Template by Microsoft A starter template for TypeScript and React with a detailed README describing how to use the two together. Note: this doesn't seem to be frequently updated anymore.
Steve Kinney's React and TypeScript course on Frontend Masters (paid)
Brian Holt's Intermediate React course on Frontend Masters (paid) - Converting App To TypeScript Section
Mike North's Production TypeScript course on Frontend Masters (paid)
TSX Guide by gojutin
TypeScript conversion:
Matt Pocock's Beginner's Typescript Tutorial
Matt Pocock's React with TypeScript Tutorial
You?.

Recommended React + TypeScript talks

Ultimate React Component Patterns with TypeScript, by Martin Hochel, GeeCon Prague 2018
How to Build React Apps with TypeScript, by ClearEdge Tech Talk 2022
Create a More Readable React Codebase Using TypeScript, by Emma Brillhart 2019
Advanced TypeScript with React, by Nikhil Verma 2019
Senior Typescript Features You don't Know About - clean-code, by CoderOne 2023
React & TypeScript - Course for Beginners, by FreeCodeCamp 2022
TypeScript + React, by Chris Toomey 2019
Mastering React Hooks, by Jack Herrington 2021
Using Hooks and codegen by Tejas Kumar 2019
Please help contribute to this new section!

Time to Really Learn TypeScript

Believe it or not, we have only barely introduced TypeScript here in this cheatsheet. If you are still facing TypeScript troubleshooting issues, it is likely that your understanding of TS is still too superficial.

There is a whole world of generic type logic that you will eventually get into, however it becomes far less dealing with React than just getting good at TypeScript so it is out of scope here. But at least you can get productive in React now :)

It is worth mentioning some resources to help you get started:

Step through the 40+ examples under the playground's Examples section, written by @Orta
Anders Hejlsberg's overview of TS: https://www.youtube.com/watch?v=ET4kT88JRXs
Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an Egghead.io course
Basarat's Deep Dive: https://basarat.gitbook.io/typescript/
Axel Rauschmeyer's Tackling TypeScript
Rares Matei: Egghead.io course's advanced TypeScript course on Egghead.io is great for newer typescript features and practical type logic applications (e.g. recursively making all properties of a type readonly)
Learn about Generics, Conditional types and Mapped types
Shu Uesugi: TypeScript for Beginner Programmers
Here is another TypeScript Error Guide that you can check for your errors.

Example App

My question isn't answered here!

File an issue.

Contributors

This project follows the all-contributors specification. See CONTRIBUTORS.md for the full list. Contributions of any kind welcome!

More Resources

to explore the angular.

mail [email protected] to add your project or resources here 🔥.

1
React Community – React
https://react.dev/community
The library for web and native user interfaces
2
Patterns.dev
https://www.patterns.dev/
Learn JavaScript design and performance patterns for building more powerful web applications.
3
React
https://react.dev/
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
4
Quick Start – React
https://react.dev/learn
The library for web and native user interfaces
5
Snack - React Native in the browser
https://snack.expo.dev/
Write code in Expo's online editor and instantly use it on your phone.
6
React JavaScript Tutorial in Visual Studio Code
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
React JavaScript tutorial showing IntelliSense, debugging, and code navigation support in the Visual Studio Code editor.
7
Overview · React Native
https://reactnative.dev/community/overview
The React Native Community
8
React Native · Learn once, write anywhere
https://reactnative.dev/
A framework for building native apps using React
9
React Conferences – React
https://react.dev/community/conferences
The library for web and native user interfaces
10
React - CodeSandbox
https://codesandbox.io/s/new
React example starter project
11
React friendly API wrapper around MapboxGL JS
https://github.com/visgl/react-map-gl
React friendly API wrapper around MapboxGL JS. Contribute to visgl/react-map-gl development by creating an account on GitHub.
12
React components for Leaflet maps
https://github.com/PaulLeCam/react-leaflet
React components for Leaflet maps. Contribute to PaulLeCam/react-leaflet development by creating an account on GitHub.
13
The visual editor for React
https://github.com/measuredco/puck
The visual editor for React. Contribute to measuredco/puck development by creating an account on GitHub.
14
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
https://github.com/mkosir/react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) - mkosir/react-parallax-tilt
15
Fast, easy and reliable testing for anything that runs in a browser.
https://github.com/cypress-io/cypress
Fast, easy and reliable testing for anything that runs in a browser. - cypress-io/cypress
16
🇨🇭 A React renderer for Three.js
https://github.com/pmndrs/react-three-fiber
🇨🇭 A React renderer for Three.js. Contribute to pmndrs/react-three-fiber development by creating an account on GitHub.
17
Create skeleton screens that automatically adapt to your app!
https://github.com/dvtng/react-loading-skeleton
Create skeleton screens that automatically adapt to your app! - dvtng/react-loading-skeleton
18
Open source, production-ready animation and gesture library for React
https://github.com/framer/motion
Open source, production-ready animation and gesture library for React - framer/motion
19
The recommended Code Splitting library for React ✂️✨
https://github.com/gregberge/loadable-components
The recommended Code Splitting library for React ✂️✨ - gregberge/loadable-components
20
A collection of composable React components for building interactive data visualizations
https://github.com/FormidableLabs/victory
A collection of composable React components for building interactive data visualizations - FormidableLabs/victory
21
TW Elements integration with React - Free Examples & Tutorial
https://tw-elements.com/docs/standard/integrations/react-integration/
This article shows you how to integrate React application with TW Elements. Free download, open source license.
22
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://github.com/TanStack/router
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
23
🎥 Make videos programmatically with React
https://github.com/remotion-dev/remotion
🎥 Make videos programmatically with React. Contribute to remotion-dev/remotion development by creating an account on GitHub.
24
The HTML touch slider carousel with the most native feeling you will get.
https://github.com/rcbyr/keen-slider
The HTML touch slider carousel with the most native feeling you will get. - rcbyr/keen-slider
25
A JS library for predictable global state management
https://github.com/reduxjs/redux
A JS library for predictable global state management - reduxjs/redux
26
Simple reusable React error boundary component
https://github.com/bvaughn/react-error-boundary
Simple reusable React error boundary component. Contribute to bvaughn/react-error-boundary development by creating an account on GitHub.
27
Declarative routing for React
https://github.com/remix-run/react-router
Declarative routing for React. Contribute to remix-run/react-router development by creating an account on GitHub.
28
Personal blog by Dan Abramov.
https://github.com/gaearon/overreacted.io
Personal blog by Dan Abramov. Contribute to gaearon/overreacted.io development by creating an account on GitHub.
29
Next generation frontend tooling. It's fast!
https://github.com/vitejs/vite
Next generation frontend tooling. It's fast! Contribute to vitejs/vite development by creating an account on GitHub.
30
React Hooks for Data Fetching
https://github.com/vercel/swr
React Hooks for Data Fetching. Contribute to vercel/swr development by creating an account on GitHub.
31
📄 Create PDF files using React
https://github.com/diegomura/react-pdf
📄 Create PDF files using React. Contribute to diegomura/react-pdf development by creating an account on GitHub.
32
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://github.com/plouc/nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries - plouc/nivo
33
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
https://github.com/facebookexperimental/Recoil
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features o...
34
[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps
https://github.com/expo/router
[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps - expo/router
35
🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
https://github.com/alan2207/bulletproof-react
🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications. - GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for...
36
The Select Component for React.js
https://github.com/JedWatson/react-select
The Select Component for React.js. Contribute to JedWatson/react-select development by creating an account on GitHub.
37
Toolkit for building accessible web apps with React
https://github.com/ariakit/ariakit
Toolkit for building accessible web apps with React - ariakit/ariakit
38
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
https://github.com/styled-components/styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/styled-components
39
Create the next immutable state by mutating the current one
https://github.com/immerjs/immer
Create the next immutable state by mutating the current one - immerjs/immer
40
An open-source, cross-platform terminal for seamless workflows
https://github.com/wavetermdev/waveterm
An open-source, cross-platform terminal for seamless workflows - wavetermdev/waveterm
41
Isolated React component development environment with a living style guide
https://github.com/styleguidist/react-styleguidist
Isolated React component development environment with a living style guide - styleguidist/react-styleguidist
42
🐯 visx | visualization components
https://github.com/airbnb/visx
🐯 visx | visualization components. Contribute to airbnb/visx development by creating an account on GitHub.
43
Build forms in React, without the tears 😭
https://github.com/jaredpalmer/formik
Build forms in React, without the tears 😭 . Contribute to jaredpalmer/formik development by creating an account on GitHub.
44
Routing and navigation for your React Native apps
https://github.com/react-navigation/react-navigation
Routing and navigation for your React Native apps. Contribute to react-navigation/react-navigation development by creating an account on GitHub.
45
The library for web and native user interfaces.
https://github.com/facebook/react
The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.
46
🏹 Draw arrows between React elements 🖋
https://github.com/pierpo/react-archer
🏹 Draw arrows between React elements 🖋. Contribute to pierpo/react-archer development by creating an account on GitHub.
47
The React Framework
https://github.com/vercel/next.js
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
48
Winamp 2 reimplemented for the browser
https://github.com/captbaritone/webamp
Winamp 2 reimplemented for the browser. Contribute to captbaritone/webamp development by creating an account on GitHub.
49
The best React-based framework with performance, scalability and security built in.
https://github.com/gatsbyjs/gatsby
The best React-based framework with performance, scalability and security built in. - gatsbyjs/gatsby
50
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
https://github.com/reactjs/react-rails
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker. - reactjs/react-rails
51
The monorepo home to all of the FormatJS related libraries, most notably react-intl.
https://github.com/formatjs/formatjs
The monorepo home to all of the FormatJS related libraries, most notably react-intl. - formatjs/formatjs
52
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://github.com/microsoft/fluentui
Fluent UI web represents a collection of utilities, React components, and web components for building web applications. - microsoft/fluentui
53
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://github.com/TanStack/query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query
54
Simple, scalable state management.
https://github.com/mobxjs/mobx
Simple, scalable state management. Contribute to mobxjs/mobx development by creating an account on GitHub.
55
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://github.com/formkit/auto-animate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. - formkit/auto-animate
56
Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://github.com/remix-run/remix
Build Better Websites. Create modern, resilient user experiences with web fundamentals. - remix-run/remix
57
svg react icons of popular icon packs
https://github.com/react-icons/react-icons
svg react icons of popular icon packs. Contribute to react-icons/react-icons development by creating an account on GitHub.
58
👩‍🎤 CSS-in-JS library designed for high performance style composition
https://github.com/emotion-js/emotion
👩‍🎤 CSS-in-JS library designed for high performance style composition - emotion-js/emotion
59
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://github.com/shadcn-ui/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. - shadcn-ui/ui
60
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://github.com/apollographql/apollo-client
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server. - apollographql/apollo-client
61
Vest ✅ Declarative validations framework
https://github.com/ealush/vest
Vest ✅ Declarative validations framework. Contribute to ealush/vest development by creating an account on GitHub.
62
Set up a modern web app by running one command.
https://github.com/facebook/create-react-app
Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.
63
A React component for Instagram like stories
https://github.com/mohitk05/react-insta-stories
A React component for Instagram like stories. Contribute to mohitk05/react-insta-stories development by creating an account on GitHub.
64
❤️ A heart-shaped toggle switch component for React.
https://github.com/anatoliygatt/heart-switch
❤️ A heart-shaped toggle switch component for React. - anatoliygatt/heart-switch
65
why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
https://github.com/welldone-software/why-did-you-render
why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.) - welldone-software/why-did-you-render
66
Relay is a JavaScript framework for building data-driven React applications.
https://github.com/facebook/relay
Relay is a JavaScript framework for building data-driven React applications. - facebook/relay
67
The Fullstack Tutorial for GraphQL
https://github.com/howtographql/howtographql
The Fullstack Tutorial for GraphQL. Contribute to howtographql/howtographql development by creating an account on GitHub.
68
The compiler for ReScript.
https://github.com/rescript-lang/rescript-compiler
The compiler for ReScript. Contribute to rescript-lang/rescript-compiler development by creating an account on GitHub.
69
A JavaScript library to position floating elements and create interactions for them.
https://github.com/floating-ui/floating-ui
A JavaScript library to position floating elements and create interactions for them. - floating-ui/floating-ui
70
Data Visualization Components
https://github.com/uber/react-vis
Data Visualization Components. Contribute to uber/react-vis development by creating an account on GitHub.
71
The lightweight and flexible Cookie Consent Banner
https://github.com/porscheofficial/cookie-consent-banner
The lightweight and flexible Cookie Consent Banner - porscheofficial/cookie-consent-banner
72
Sandbox for developing and testing UI components in isolation
https://github.com/react-cosmos/react-cosmos
Sandbox for developing and testing UI components in isolation - react-cosmos/react-cosmos
73
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://github.com/alibaba/formily
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 - alibaba/formily
74
fast, portable, and extensible cmd+k interface for your site
https://github.com/timc1/kbar
fast, portable, and extensible cmd+k interface for your site - timc1/kbar
75
The zero configuration build tool for the web. 📦🚀
https://github.com/parcel-bundler/parcel
The zero configuration build tool for the web. 📦🚀. Contribute to parcel-bundler/parcel development by creating an account on GitHub.
76
A library for development of single-page full-stack web applications in clj/cljs
https://github.com/fulcrologic/fulcro
A library for development of single-page full-stack web applications in clj/cljs - fulcrologic/fulcro
77
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://github.com/TanStack/table
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table - TanStack/table
78
💬 The most complete chat UI for React Native
https://github.com/FaridSafi/react-native-gifted-chat
💬 The most complete chat UI for React Native. Contribute to FaridSafi/react-native-gifted-chat development by creating an account on GitHub.
79
Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://github.com/lukasbach/react-complex-tree
Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop - lukasbach/react-complex-tree
80
✌️ A spring physics based React animation library
https://github.com/pmndrs/react-spring
✌️ A spring physics based React animation library. Contribute to pmndrs/react-spring development by creating an account on GitHub.
81
Redefined chart library built with React and D3
https://github.com/recharts/recharts
Redefined chart library built with React and D3. Contribute to recharts/recharts development by creating an account on GitHub.
82
Bootstrap components built with React
https://github.com/react-bootstrap/react-bootstrap
Bootstrap components built with React. Contribute to react-bootstrap/react-bootstrap development by creating an account on GitHub.
83
🐻 Bear necessities for state management in React
https://github.com/pmndrs/zustand
🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.
84
A framework for building native applications using React
https://github.com/facebook/react-native
A framework for building native applications using React - facebook/react-native
85
📋 React Hooks for form state management and validation (Web + React Native)
https://github.com/react-hook-form/react-hook-form
📋 React Hooks for form state management and validation (Web + React Native) - react-hook-form/react-hook-form
86
A build system for development of composable software.
https://github.com/teambit/bit
A build system for development of composable software. - teambit/bit
87
👻 Primitive and flexible state management for React
https://github.com/pmndrs/jotai
👻 Primitive and flexible state management for React - pmndrs/jotai
88
Your window into the Elastic Stack
https://github.com/elastic/kibana
Your window into the Elastic Stack. Contribute to elastic/kibana development by creating an account on GitHub.
89
A <QRCode/> component for use with React.
https://github.com/zpao/qrcode.react
A <QRCode/> component for use with React. Contribute to zpao/qrcode.react development by creating an account on GitHub.
90
Realm is a mobile database: an alternative to SQLite & key-value stores
https://github.com/realm/realm-js
Realm is a mobile database: an alternative to SQLite & key-value stores - realm/realm-js
91
Internationalization for react done right. Using the i18next i18n ecosystem.
https://github.com/i18next/react-i18next
Internationalization for react done right. Using the i18next i18n ecosystem. - i18next/react-i18next
92
Optimize React performance and make your React 70% faster in minutes, not months.
https://github.com/aidenybai/million
Optimize React performance and make your React 70% faster in minutes, not months. - GitHub - aidenybai/million: Optimize React performance and make your React 70% faster in minutes, not months.
93
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://github.com/refinedev/refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - refinedev/refine
94
⚛️ A React renderer for Figma
https://github.com/react-figma/react-figma
⚛️ A React renderer for Figma. Contribute to react-figma/react-figma development by creating an account on GitHub.
95
A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
https://github.com/marmelab/react-admin
A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design - marmelab/react-admin
96
gcal/outlook like calendar component
https://github.com/jquense/react-big-calendar
gcal/outlook like calendar component. Contribute to jquense/react-big-calendar development by creating an account on GitHub.
97
Expo
https://expo.dev/
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
98
Feature-rich and customizable data grid React component
https://github.com/adazzle/react-data-grid
Feature-rich and customizable data grid React component - adazzle/react-data-grid
99
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://github.com/mui/material-ui
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever. - mui/material-ui
100
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://github.com/preactjs/preact
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM. - preactjs/preact
101
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
https://github.com/ivanhofer/typesafe-i18n
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. - ivanhofer/typesafe-i18n
102
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://github.com/storybookjs/storybook
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation - storybookjs/storybook
103
Immutable persistent data collections for Javascript which increase efficiency and simplicity.
https://github.com/immutable-js/immutable-js
Immutable persistent data collections for Javascript which increase efficiency and simplicity. - immutable-js/immutable-js
104
Modern file uploading - components & hooks for React
https://github.com/rpldy/react-uploady
Modern file uploading - components & hooks for React - rpldy/react-uploady
105
Actor-based state management & orchestration for complex app logic.
https://github.com/statelyai/xstate
Actor-based state management & orchestration for complex app logic. - statelyai/xstate
106
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
https://github.com/testing-library/react-testing-library
🐐 Simple and complete React DOM testing utilities that encourage good testing practices. - testing-library/react-testing-library
107
An enterprise-class UI design language and React UI library
https://github.com/ant-design/ant-design
An enterprise-class UI design language and React UI library - ant-design/ant-design
108
A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/
https://github.com/pubkey/rxdb
A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/ - pubkey/rxdb
109
Most modern mobile touch slider with hardware accelerated transitions
https://github.com/nolimits4web/swiper
Most modern mobile touch slider with hardware accelerated transitions - nolimits4web/swiper
110
⚡️ The Missing Fullstack Toolkit for Next.js
https://github.com/blitz-js/blitz
⚡️ The Missing Fullstack Toolkit for Next.js. Contribute to blitz-js/blitz development by creating an account on GitHub.
111
Full featured HTML framework for building iOS & Android apps
https://github.com/framework7io/framework7
Full featured HTML framework for building iOS & Android apps - framework7io/framework7
112
A simple and reusable datepicker component for React
https://github.com/Hacker0x01/react-datepicker/
A simple and reusable datepicker component for React - Hacker0x01/react-datepicker
113
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://github.com/yairEO/tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue - yairEO/tagify
114
Zero-runtime CSS in JS library
https://github.com/callstack/linaria
Zero-runtime CSS in JS library. Contribute to callstack/linaria development by creating an account on GitHub.
115
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
https://github.com/downshift-js/downshift
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. - downshift-js/downshift
116
🥢 A minimalist-friendly ~2.1KB routing for React and Preact
https://github.com/molefrog/wouter
🥢 A minimalist-friendly ~2.1KB routing for React and Preact - molefrog/wouter
117
A draggable and resizable grid layout with responsive breakpoints, for React.
https://github.com/react-grid-layout/react-grid-layout
A draggable and resizable grid layout with responsive breakpoints, for React. - react-grid-layout/react-grid-layout
118
Customizable Icons for React Native with support for image source and full styling.
https://github.com/oblador/react-native-vector-icons
Customizable Icons for React Native with support for image source and full styling. - oblador/react-native-vector-icons
119
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://github.com/skellock/reactotron
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows. - infinitered/reactotron
120
A React component for building Web forms from JSON Schema.
https://github.com/mozilla-services/react-jsonschema-form
A React component for building Web forms from JSON Schema. - rjsf-team/react-jsonschema-form
121
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
https://github.com/mattermost/mattermost-server
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle.. - mattermost/mattermost
122
Zero-runtime Stylesheets-in-TypeScript
https://github.com/seek-oss/vanilla-extract
Zero-runtime Stylesheets-in-TypeScript. Contribute to vanilla-extract-css/vanilla-extract development by creating an account on GitHub.
123
Delightful JavaScript Testing.
https://github.com/facebook/jest
Delightful JavaScript Testing. Contribute to jestjs/jest development by creating an account on GitHub.
124
Curated List of React Components & Libraries.
https://github.com/brillout/awesome-react-components
Curated List of React Components & Libraries. Contribute to brillout/awesome-react-components development by creating an account on GitHub.
125
Business logic with ease ☄️
https://github.com/zerobias/effector
Business logic with ease ☄️. Contribute to effector/effector development by creating an account on GitHub.
126
React-specific linting rules for ESLint
https://github.com/yannickcr/eslint-plugin-react
React-specific linting rules for ESLint. Contribute to jsx-eslint/eslint-plugin-react development by creating an account on GitHub.
127
🌈 React for interactive command-line apps
https://github.com/vadimdemedes/ink
🌈 React for interactive command-line apps. Contribute to vadimdemedes/ink development by creating an account on GitHub.
128
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
https://github.com/matteobruni/tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use compon...
129
Device Information for React Native iOS and Android
https://github.com/react-native-device-info/react-native-device-info
Device Information for React Native iOS and Android - react-native-device-info/react-native-device-info
130
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
https://github.com/sudheerj/reactjs-interview-questions
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!! - sudheerj/reactjs-interview-questions
131
Cheatsheets for experienced React developers getting started with TypeScript
https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
Cheatsheets for experienced React developers getting started with TypeScript - typescript-cheatsheets/react
132
babel-relay-plugin
https://www.npmjs.com/package/babel-relay-plugin
Babel Relay Plugin for transpiling GraphQL queries for use with Relay.. Latest version: 0.11.0, last published: 8 years ago. Start using babel-relay-plugin in your project by running `npm i babel-relay-plugin`. There are 73 other projects in the npm registry using babel-relay-plugin.
133
598fa75e22bdfa44cf47
https://gist.github.com/wincent/598fa75e22bdfa44cf47
GitHub Gist: instantly share code, notes, and snippets.
134
eyston/relay-composite-network-layer
https://github.com/eyston/relay-composite-network-layer
Contribute to eyston/relay-composite-network-layer development by creating an account on GitHub.
135
Relay TodoMVC with routing
https://github.com/taion/relay-todomvc
Relay TodoMVC with routing. Contribute to taion/relay-todomvc development by creating an account on GitHub.
136
Sangria Relay Support
https://github.com/sangria-graphql/sangria-relay
Sangria Relay Support. Contribute to sangria-graphql/sangria-relay development by creating an account on GitHub.
137
Bringing Modern Web Techniques to Mobile
https://www.youtube.com/watch?v=X6YbAKiLCLU
As we introduce React Native & Relay, learn how we use JavaScript libraries and techniques to help our engineers develop great mobile experiences ever more e...
138
Use Relay to fetch and store data outside of a React component
https://github.com/acdlite/relay-sink
Use Relay to fetch and store data outside of a React component - acdlite/relay-sink
139
Use Relay without a GraphQL server
https://github.com/relay-tools/relay-local-schema
Use Relay without a GraphQL server. Contribute to relay-tools/relay-local-schema development by creating an account on GitHub.
140
Relay + GraphQL + React on Rails
https://github.com/nethsix/relay-on-rails
Relay + GraphQL + React on Rails. Contribute to nethsix/relay-on-rails development by creating an account on GitHub.
141
React, Relay, GraphQL project skeleton
https://github.com/fortruce/relay-skeleton
React, Relay, GraphQL project skeleton. Contribute to fortruce/relay-skeleton development by creating an account on GitHub.
142
react-native and relay working out of the box
https://github.com/lenaten/react-native-relay
react-native and relay working out of the box. Contribute to lenaten/react-native-relay development by creating an account on GitHub.
143
Babel plugin which converts Flow types into Relay fragments
https://github.com/guymers/babel-plugin-flow-relay-query
Babel plugin which converts Flow types into Relay fragments - guymers/babel-plugin-flow-relay-query
144
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
https://github.com/lvarayut/relay-fullstack
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS - lvarayut/relay-fullstack
145
A Go/Golang library to help construct a graphql-go server supporting react-relay.
https://github.com/graphql-go/relay
A Go/Golang library to help construct a graphql-go server supporting react-relay. - graphql-go/relay
146
React/Relay TodoMVC app, driven by a Golang GraphQL backend
https://github.com/sogko/todomvc-relay-go
React/Relay TodoMVC app, driven by a Golang GraphQL backend - sogko/todomvc-relay-go
147
Adds server side rendering support to react-router-relay
https://github.com/denvned/isomorphic-relay-router
Adds server side rendering support to react-router-relay - denvned/isomorphic-relay-router
148
Light, Electron-based Wrapper around GraphiQL
https://github.com/skevy/graphiql-app
Light, Electron-based Wrapper around GraphiQL. Contribute to skevy/graphiql-app development by creating an account on GitHub.
149
relay-nested-routes
https://www.npmjs.com/package/relay-nested-routes
Nested react-router views for Relay. Latest version: 0.3.1, last published: 9 years ago. Start using relay-nested-routes in your project by running `npm i relay-nested-routes`. There are no other projects in the npm registry using relay-nested-routes.
150
recompose-relay
https://www.npmjs.com/package/recompose-relay
Recompose helpers for Relay.. Latest version: 0.3.1, last published: 8 years ago. Start using recompose-relay in your project by running `npm i recompose-relay`. There are no other projects in the npm registry using recompose-relay.
151
Todo example for koa-graphql and relay
https://github.com/chentsulin/koa-graphql-relay-example
Todo example for koa-graphql and relay. Contribute to chentsulin/koa-graphql-relay-example development by creating an account on GitHub.
152
Utility decorators for Relay components
https://github.com/4Catalyzer/relay-decorators
Utility decorators for Relay components. Contribute to 4Catalyzer/relay-decorators development by creating an account on GitHub.
153
Build software better, together
https://github.com/relayjs/relay-starter-kit.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
154
A very simple starter for React Relay using Browserify
https://github.com/mhart/simple-relay-starter
A very simple starter for React Relay using Browserify - mhart/simple-relay-starter
155
A thin wrapper for sequelize and graphql-relay
https://github.com/MattMcFarland/sequelize-relay
A thin wrapper for sequelize and graphql-relay. Contribute to MattMcFarland/sequelize-relay development by creating an account on GitHub.
156
Build software better, together
https://github.com/sequelize/sequelize.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
157
A library to help construct a graphql-js server supporting react-relay.
https://github.com/graphql/graphql-relay-js
A library to help construct a graphql-js server supporting react-relay. - graphql/graphql-relay-js
158
[Deprecated] Relay Classic integration for React Router
https://github.com/relay-tools/react-router-relay
[Deprecated] Relay Classic integration for React Router - relay-tools/react-router-relay
159
GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.
https://github.com/graphql/graphiql
GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools. - graphql/graphiql
160
A library to help construct a graphql-py server supporting react-relay
https://github.com/graphql-python/graphql-relay-py
A library to help construct a graphql-py server supporting react-relay - graphql-python/graphql-relay-py
161
Facebook Relay talk - Lunch and Learn session
https://www.youtube.com/watch?v=sP3n-nht0Xo
Talk and live demo of Facebook Relay goodness, with a touch of CSS modules and PostCSS. Presented by Albert Still and Alex Savin
162
An Application Framework For React at react-europe 2015
https://www.youtube.com/watch?v=IrgHurBjQbg
Relay is a new framework from Facebook that enables declarative data fetching & updates for React applications. Relay components use GraphQL to specify their...
163
Barebones starting point for a Relay application.
https://github.com/relayjs/relay-starter-kit
Barebones starting point for a Relay application. Contribute to facebookarchive/relay-starter-kit development by creating an account on GitHub.
164
Seamless Syncing for React (VanJS)
http://www.slideshare.net/BrooklynZelenka/relay-seamless-syncing-for-react-vanjs
Relay: Seamless Syncing for React (VanJS) - Download as a PDF or view online for free
165
Relay - Daniel Dembach - Hamburg React.js Meetup
https://www.youtube.com/watch?v=dvWTxy1eY6s
A recording taken during the meetup of the react.js hamburg group:http://www.meetup.com/Hamburg-React-js-Meetup/events/225186254/
166
Build software better, together
https://github.com/rmosolgo/graphql-relay-ruby
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
167
Build software better, together
https://github.com/graphql/graphiql.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
168
an chat example showing Relay with routing and pagination
https://github.com/transedward/relay-chat
an chat example showing Relay with routing and pagination - hungtuchen/relay-chat
169
Create Relay connections from MongoDB cursors
https://github.com/mikberg/relay-mongodb-connection
Create Relay connections from MongoDB cursors. Contribute to heysailor/relay-mongodb-connection development by creating an account on GitHub.
170
Build software better, together
https://github.com/codefoundries/UniversalRelayBoilerplate
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
171
Getting Started with Relay
https://auth0.com/blog/2015/10/06/getting-started-with-relay/
Learn how to get started with a Relay app and how to protect the GraphQL endpoint with JWT authentication.
172
💥 Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, and Joy UI.
https://github.com/kriasoft/nodejs-api-starter
💥 Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, and Joy UI. - kriasoft/graphql-starter-kit
173
React with Relay and GraphQL with Andrew Smith
https://www.youtube.com/watch?v=Cfna8gwt9h8
Andrew Smith presents GraphQL in relation to React and Relay.
174
ReactRelayNetworkLayer with middlewares and query batching for Relay Classic.
https://github.com/nodkz/react-relay-network-layer
ReactRelayNetworkLayer with middlewares and query batching for Relay Classic. - relay-tools/react-relay-network-layer
175
Create a GraphQL HTTP server with Koa.
https://github.com/chentsulin/koa-graphql
Create a GraphQL HTTP server with Koa. Contribute to graphql-community/koa-graphql development by creating an account on GitHub.
176
Make Relay work with React Native out of the box · Issue #26 · facebook/relay
https://github.com/facebook/relay/issues/26
The remaining steps are: Relay/React Native/fbjs versioning Use the appropriate unstableBatchedUpdates depending on React/React Native Version of fetch polyfill for React Native Document the use of...
177
useHooks – The React Hooks Library
https://usehooks.com/
A collection of modern, server-safe React hooks – from the ui.dev team
178
Making Sense of React Hooks
https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
This week, Sophie Alpert and I presented the “Hooks” proposal at React Conf, followed by a deep dive from Ryan Florence:
179
not magic, just arrays
https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e
Untangling the rules around the proposal using diagrams
180
Color Match - CodeSandbox
https://codesandbox.io/s/jjy215l7w3
Color Match by tannerlinsley using d3-ease, emotion, mo-js, raf, react, react-dom, react-emotion, react-scripts
181
Counter using useState of React Hooks - CodeSandbox
https://codesandbox.io/s/yjn90lzwrx?module=%2Fsrc%2FApp.js
Create a Counter using React Hooks with useState
182
CodeSandbox
https://codesandbox.io/s/m449vyk65x
CodeSandbox is an online editor tailored for web applications.
183
ppxnl191zx - CodeSandbox
https://codesandbox.io/s/ppxnl191zx
ppxnl191zx using lodash, react, react-dom, react-scripts, react-spring
184
React Hooks for GraphQL
https://medium.com/open-graphql/react-hooks-for-graphql-3fa8ebdd6c62
How to create custom React hooks to handle common GraphQL operations.
185
Hooks in react-spring, a tutorial
https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4
Yesterday the React-team finally unveiled their vision of a class-less future in React. Today we’re going to take a look at how to use…
186
Using the State Hook – React
https://reactjs.org/docs/hooks-state.html
A JavaScript library for building user interfaces
187
Using the Effect Hook – React
https://reactjs.org/docs/hooks-effect.html
A JavaScript library for building user interfaces
188
Hooks Todo App - CodeSandbox
https://codesandbox.io/s/9kwyzy0y4
Example app for this post: \n\nhttps://blog.blackbox-vision.tech/making-a-beautiful-todo-app-using-react-hooks-material-ui
189
useState() and useEffect() - CodeSandbox
https://codesandbox.io/s/yq5qowzrvz
React Hooks: useState() and useEffect() by chris-sev using react, react-dom, react-scripts
190
Building Your Own Hooks – React
https://reactjs.org/docs/hooks-custom.html
A JavaScript library for building user interfaces
191
Rules of Hooks – React
https://reactjs.org/docs/hooks-rules.html
A JavaScript library for building user interfaces
192
Introducing Hooks – React
https://reactjs.org/docs/hooks-intro.html
A JavaScript library for building user interfaces
193
Everything you need to know about React Hooks
https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349
React just announced a new feature: Hooks. It’s a brand new set of APIs that enables powerful new ways to share stateful logic between…
194
Hooks at a Glance – React
https://reactjs.org/docs/hooks-overview.html
A JavaScript library for building user interfaces
195
Hooks FAQ – React
https://reactjs.org/docs/hooks-faq.html
A JavaScript library for building user interfaces
196
Hooks API Reference – React
https://reactjs.org/docs/hooks-reference.html
A JavaScript library for building user interfaces
197
React Hooks and Suspense
https://egghead.io/playlists/react-hooks-and-suspense-650307f2
React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more ...
198
Primer on React Hooks
https://testdriven.io/blog/react-hooks-primer/
An introduction to React Hooks.
199
React Hook to track the visibility of a functional component
https://github.com/AvraamMavridis/react-intersection-visible-hook
React Hook to track the visibility of a functional component - AvraamMavridis/react-intersection-visible-hook
200
Manage global state with React Hooks
https://medium.com/@Charles_Stover/manage-global-state-with-react-hooks-6065041b55b4
Since the announcement of experimental Hooks in React 16.7, they have taken the React community by storm.
201
Managing Web Sockets with useEffect and useState
https://medium.com/@rossbulat/react-hooks-managing-web-sockets-with-useeffect-and-usestate-2dfc30eeceec
Rundown of React Hooks and applying them to a real-time chat room simulation
202
React Hooks - A deeper dive featuring useContext and useReducer
https://testdriven.io/blog/react-hooks-advanced/
This article looks at how React JS hooks can be used to make React applications and their state management clean and efficient.
203
jacobp100/hooks-test
https://github.com/jacobp100/hooks-test
Contribute to jacobp100/hooks-test development by creating an account on GitHub.
204
A set of reusable React Hooks.
https://github.com/beizhedenglong/react-hooks-lib
A set of reusable React Hooks. Contribute to beizhedenglong/react-hooks-lib development by creating an account on GitHub.
205
Determining screen size type for Bootstrap 4 grid.
https://github.com/pankod/react-hooks-screen-type
Determining screen size type for Bootstrap 4 grid. - pankod/react-hooks-screen-type
206
A collection of useful React hooks
https://github.com/kitze/react-hanger
A collection of useful React hooks . Contribute to kitze/react-hanger development by creating an account on GitHub.
207
React Hooks for Firebase.
https://github.com/csfrequency/react-firebase-hooks
React Hooks for Firebase. Contribute to CSFrequency/react-firebase-hooks development by creating an account on GitHub.
208
[OUTDATED]Ponyfill for the React Hooks API (Support RN)
https://github.com/yesmeck/react-with-hooks
[OUTDATED]Ponyfill for the React Hooks API (Support RN) - yesmeck/react-with-hooks
209
React's Hooks API implemented for web components 👻
https://github.com/matthewp/haunted
React's Hooks API implemented for web components 👻 - matthewp/haunted
210
A timer hook for React
https://github.com/thibaultboursier/use-timer
A timer hook for React. Contribute to thibaultboursier/use-timer development by creating an account on GitHub.
211
React Hooks — 👍
https://github.com/streamich/react-use
React Hooks — 👍. Contribute to streamich/react-use development by creating an account on GitHub.
212
Web. Components. 😂
https://github.com/palmerhq/the-platform
Web. Components. 😂. Contribute to jaredpalmer/the-platform development by creating an account on GitHub.
213
🌩 A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte
https://github.com/storeon/storeon
🌩 A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte - storeon/storeon
214
Use immer to drive state with a React hooks
https://github.com/mweststrate/use-immer
Use immer to drive state with a React hooks. Contribute to immerjs/use-immer development by creating an account on GitHub.
215
React hook for conveniently use Fetch API
https://github.com/ilyalesik/react-fetch-hook
React hook for conveniently use Fetch API. Contribute to ilyalesik/react-fetch-hook development by creating an account on GitHub.
216
React hooks implementation of Google's "Thanos" easter egg
https://github.com/codeshifu/react-thanos
React hooks implementation of Google's "Thanos" easter egg - luqmanoop/react-thanos
217
Learn Advanced React Hooks workshop
https://github.com/kentcdodds/advanced-react-hooks
Learn Advanced React Hooks workshop. Contribute to kentcdodds/advanced-react-hooks development by creating an account on GitHub.
218
React hooks for convenient react-navigation use
https://github.com/react-navigation/react-navigation-hooks
React hooks for convenient react-navigation use. Contribute to react-navigation/hooks development by creating an account on GitHub.
219
React Native APIs turned into React Hooks for use in functional React components
https://github.com/react-native-community/react-native-hooks
React Native APIs turned into React Hooks for use in functional React components - react-native-community/hooks
220
📋 React Hooks for form state management and validation (Web + React Native)
https://github.com/bluebill1049/react-hook-form
📋 React Hooks for form state management and validation (Web + React Native) - react-hook-form/react-hook-form
221
React Hook for accessing state and dispatch from a Redux store
https://github.com/facebookincubator/redux-react-hook
React Hook for accessing state and dispatch from a Redux store - facebookarchive/redux-react-hook
222
Use React Hooks for `connect` by markerikson · Pull Request #1065 · reduxjs/react-redux
https://github.com/reduxjs/react-redux/pull/1065
This PR builds on the previous React-Redux version 6 preview work from #898, #995, aand #1000 . As with the previous couple PRs, the major changes are: Switching from legacy context to createCont...
223
React Today and Tomorrow and 90% Cleaner React With Hooks
https://www.youtube.com/watch?v=dpw9EHDh2bM
The first three talks from React Conf 2018 by Sophie Alpert, Dan Abramov, and Ryan Florence.Learn more about Hooks at https://reactjs.org/hooks.
224
🐶 React hook for making isomorphic http requests
https://github.com/alex-cory/react-usefetch
🐶 React hook for making isomorphic http requests. Contribute to ava/use-http development by creating an account on GitHub.
225
Stepping through React code
https://youtu.be/JQeB9miT9Wc
I'm trying to figure out the best way to simplify testing of React components with react-testing-library.
226
Using Immer with Reducers and React Hooks
https://youtu.be/FmKjwh34Rn8
Learn how to simplify your reducers with Immer and integrate it with React Hooks.Code: https://github.com/benawad/react-hooks-examples/tree/4_immerLinks from...
227
Using React Hooks vs. Class Components
https://youtu.be/vbaIZ3xMj9U
I'm planning on using both React Hooks and Class Components.Code: https://github.com/benawad/react-hooks-examples/tree/3_performance_useReducerLinks from vid...
228
Are React Hooks Slower than Class Components?
https://youtu.be/tKRWuVOEB2w
React Hooks are not slower than Class Components.Starting Code: https://github.com/benawad/react-hooks-examples/tree/1_todolist_useStateFinished Code: https:...
229
Building a Todo List with React Hooks useState
https://youtu.be/cAZ-fOd1RpA
A walkthrough of building a Todo List with React Hooks. Specifically, useState.Code: https://github.com/benawad/react-hooks-examples/tree/1_todolist_useState...
230
Fetching Data from an API with React Hooks useEffect
https://youtu.be/k0WnY0Hqe5c
Learn how to fetch data from an API using React Hooks useEffect.Code: https://github.com/benawad/react-hooks-examples/tree/2_api_useEffectLinks from video:ht...
231
React Hooks useContext
https://youtu.be/xWXxkFzgnFM
Learn how to use the React Context API with function components. Using the useContext React Hook.Code: https://github.com/benawad/react-hooks-examples/tree/5...
232
My Thoughts on React Hooks
https://youtu.be/gmF4k6P2va8
React Hooks is coming in React 16.7 Links from video:https://reactjs.org/docs/hooks-intro.html----If you like cooking, checkout my side project: https://www....

to learn about angular.

FAQ's

to learn more about Angular JS.

mail [email protected] to add more queries here 🔍.

1
what are react js components
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
2
how to implement azure ad authentication in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
3
how react js is different from angularjs
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
4
where can i find webpack.config.js in react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
5
is react faster than javascript
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
6
is react similar to javascript
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
7
is react really necessary
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
8
what will replace react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
9
how to call api in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
10
will solid js replace react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
11
what is routing in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
12
how long would it take to learn react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
13
why is react better than javascript
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
14
what are the important topics in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
15
who uses react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
16
how to create an app in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
17
can i learn next js without react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
18
is react jsx
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
19
how much it will take to learn react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
20
does react js require node js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
21
how to create app in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
22
why would you use react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
23
does a react component have to return jsx
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
24
is react worth it
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
25
how to install react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
26
is react.js hard to learn
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
27
how react js works
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
28
does react js need node js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
29
when to use react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
30
why react js used
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
31
how to do react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
32
is react js free
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
33
who created react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
34
what is redux in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
35
how long it will take to learn react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
36
what we have to learn before react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
37
what language does react js use
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
38
how to get data by id in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
39
is react js functional programming
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
40
why react js is faster
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
41
when react js was introduced
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
42
where react js is used
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
43
what is a side effect react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
44
what is hooks in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
45
does react js use html
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
46
how to install react js in windows
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
47
why react js is a library
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
48
why react js is so popular
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
49
what is component will mount in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
50
who developed react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
51
what should i learn before react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
52
are react js and react native same
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
53
what are the prerequisites to learn react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
54
what is props in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
55
does react js use typescript
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
56
should i use js or jsx in react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
57
will reactjs die
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
58
is react js dying
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
59
is react losing popularity
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
60
how to call an api in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
61
is react outdated
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
62
is react safe
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
63
how to do routing in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
64
should i use next js or react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
65
what react js do
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
66
is react js a framework
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
67
what is react js in hindi
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
68
what does react js do
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
69
what react js is used for
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
70
where to start react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
71
do you need node js for react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
72
what is context api in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
73
how to create dynamic id in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
74
which react framework is best
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
75
what is react side effects
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
76
where we use react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
77
will next js replace react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
78
why should we use react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
79
what are the features of react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
80
what are react js hooks
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
81
does react js have future
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
82
where is webpack.config.js in react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
83
why react js is important
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
84
how to get dynamic id in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
85
does react.js create a virtual dom in the memory
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
86
can react js be used for backend
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
87
when was react js created
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
88
where is react-native.config.js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
89
where to learn react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
90
is react js easy to learn
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
91
when to learn react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
92
is react javascript
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
93
how to do form validation in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
94
what does strict mode do in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
95
what are states in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
96
will vue js overtake react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
97
how does react js work
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
98
how to learn react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
99
how to do unit testing in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
100
why react js is declarative
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
101
what are props in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
102
how to create an api in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
103
would react be dead
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
104
how to create an array in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
105
is react js frontend or backend
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
106
how to use navigate in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
107
what is state in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
108
how to create an object in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
109
is react js still relevant
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
110
should i learn next js or react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
111
how to fetch data using id in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
112
how to pass dynamic id in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
113
why react js is better than angular
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
114
how much js should i know to learn react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
115
how to do pagination in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
116
where to code react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
117
do you have to use react with jsx
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
118
is react js a framework or library
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
119
can react js be used for mobile apps
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
120
why react js is popular
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
121
how to add image in react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
122
who owns react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
123
what should i learn after react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
124
who developed react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
125
why do we use react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
126
is react js in demand
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
127
which companies use react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
128
what are react js and node js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
129
is react js a language
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
130
what is jsx in react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
131
why react js is better
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
132
who created react js
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
133
when to use next js over react
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)
134
how react js works internally
Yandex
Reddit
Google
Google News
Bing
YouTube
DuckDuckGO
X(Twitter)

More Sites

to check out once you're finished browsing here.

0x3d

https://www.0x3d.site/

0x3d is designed for aggregating information.

NodeJS

https://nodejs.0x3d.site/

NodeJS Online Directory

Cross Platform

https://cross-platform.0x3d.site/

Cross Platform Online Directory

Open Source

https://open-source.0x3d.site/

Open Source Online Directory

Analytics

https://analytics.0x3d.site/

Analytics Online Directory

JavaScript

https://javascript.0x3d.site/

JavaScript Online Directory

GoLang

https://golang.0x3d.site/

GoLang Online Directory

Python

https://python.0x3d.site/

Python Online Directory

Swift

https://swift.0x3d.site/

Swift Online Directory

Rust

https://rust.0x3d.site/

Rust Online Directory

Scala

https://scala.0x3d.site/

Scala Online Directory

Ruby

https://ruby.0x3d.site/

Ruby Online Directory

Clojure

https://clojure.0x3d.site/

Clojure Online Directory

Elixir

https://elixir.0x3d.site/

Elixir Online Directory

Elm

https://elm.0x3d.site/

Elm Online Directory

Lua

https://lua.0x3d.site/

Lua Online Directory

C Programming

https://c-programming.0x3d.site/

C Programming Online Directory

C++ Programming

https://cpp-programming.0x3d.site/

C++ Programming Online Directory

R Programming

https://r-programming.0x3d.site/

R Programming Online Directory

Perl

https://perl.0x3d.site/

Perl Online Directory

Java

https://java.0x3d.site/

Java Online Directory

Kotlin

https://kotlin.0x3d.site/

Kotlin Online Directory

PHP

https://php.0x3d.site/

PHP Online Directory

React JS

https://react.0x3d.site/

React JS Online Directory

Angular

https://angular.0x3d.site/

Angular JS Online Directory

React.JS

GitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScriptCheatsheets for experienced React developers getting started with TypeScript - typescript-cheatsheets/reactVisit Site

GitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript

React TypeScript Cheatsheet

Basic Cheatsheet

Basic Cheatsheet Table of Contents

Section 1: Setup

Prerequisites

React and TypeScript starter kits

Try React and TypeScript online

Section 2: Getting Started

Function Components

Hooks

useState

useCallback

useReducer

useEffect / useLayoutEffect

useRef

Option 1: DOM element ref

Option 2: Mutable value ref

See also

useImperativeHandle

See also:

Custom Hooks

More Hooks + TypeScript reading:

Example React Hooks + TypeScript Libraries:

Class Components

Typing getDerivedStateFromProps

You May Not Need defaultProps

Typing defaultProps

Consuming Props of a Component with defaultProps

Problem Statement

Solution

Misc Discussions and Knowledge

Typing Component Props

Basic Prop Types Examples

object as the non-primitive type

Empty interface, {} and Object

Useful React Prop Type Examples

Types or Interfaces?

TL;DR

More Advice

Useful table for Types vs Interfaces

getDerivedStateFromProps

Forms and Events

List of event types

Context

Basic example

Without default context value

Type assertion as an alternative

forwardRef/createRef

Generic forwardRefs

Option 1 - Wrapper component

Option 2 - Redeclare forwardRef

Option 3 - Call signature

More Info

Portals

Error Boundaries

Option 1: Using react-error-boundary

Option 2: Writing your custom error boundary component

Concurrent React/React Suspense

Troubleshooting Handbook: Types

Union Types and Type Guarding

Optional Types

Enum Types

Type Assertion

Simulating Nominal Types

Intersection Types

Union Types

Overloading Function Types

Using Inferred Types

Using Partial Types

The Types I need weren't exported!

The Types I need don't exist!

Slapping any on everything

Autogenerate types

Typing Exported Hooks

Typing Exported Components

Frequent Known Problems with TypeScript

TypeScript doesn't narrow after an object element null check

GitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript
Cheatsheets for experienced React developers getting started with TypeScript - typescript-cheatsheets/react
Visit Site

You May Not Need `defaultProps`

Typing `defaultProps`

`object` as the non-primitive type

Empty interface, `{}` and `Object`

Slapping `any` on everything

More Resources
to explore the angular.

Related Articles
to learn about angular.

FAQ's
to learn more about Angular JS.

More Sites
to check out once you're finished browsing here.