React Cheatsheets

Table of Contents

• Section 1: Initial Setup

  • Prerequisites
  • Import React

• Section 2: Getting Started

  • Function Components
  • Hooks
  • useState
  • useReducer
  • useEffect
  • useRef
  • useImperativeHandle
  • Custom Hooks

Section 1: Setup React

VS Code Extensions

• refactoring help https://marketplace.visualstudio.com/items?itemName=paulshen.paul-typescript-toolkit
• R+TS Code Snippets (there are a few...)
  • https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript
  • https://www.digitalocean.com/community/tutorials/the-best-react-extension-for-vs-code
• TypeScript official extension https://code.visualstudio.com/docs/languages/typescript

Hooks

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

useState

Type inference works very well for simple values:

const [count, setCount] = useState(initialCount);
// `count` is inferred to be variable name
// `setCount` a function is used to update the count
// `initialCount` initial value

Example:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Never modify the state manually.

useEffect / useLayoutEffect

By default, React runs the effects after every render — including the first render

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  }, [count]);
  // `[]` dependency array for the trigger useEffect function. If it is empty then it will load only initalComponent load.
  // `[count]` the trigger variable names. useEffect will call each time those value will changed.

Example:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Reference

• React Hooks Cheatsheet

Contributors

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