React Cheat Sheet

function App() {
  return <h1>Hello</h1>;
}

Function component

const App = () => <h1>Hello</h1>;

Arrow function component

function Greet({ name }) {
  return <p>Hi {name}</p>;
}

Component with props

export default App;

Export component as default

<App title="Hi" count={5} />

Use component with props

<>
  <A /> <B />
</>

Fragment (no wrapper)

{items.map(item => <li key={item.id}>{item.name}</li>)}

Render list with keys

{condition && <Alert />}

Conditional render (and)

{loading ? <Spinner /> : <Data />}

Conditional render (ternary)

<div className="btn primary">Click</div>

CSS class (className)

<div style={{color: 'red', fontSize: 14}}>X</div>

Inline styles (object)

<button onClick={() => setN(n + 1)}>+</button>

Event handler

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

State with initial value

setCount(count + 1);

Update state

setCount(c => c + 1);

Functional state update

setUser({...user, name: 'Alice'});

Update object state (spread)

setItems([...items, newItem]);

Append to array state

useEffect(() => {
  fetchData();
}, []);

Run once on mount

useEffect(() => {
  ...
}, [dep1, dep2]);

Run when deps change

useEffect(() => {
  const id = setInterval(...);
  return () => clearInterval(id);
}, []);

Effect with cleanup

const ref = useRef(null);
<input ref={ref} />

DOM ref

const renders = useRef(0);

Mutable ref (no re-render)

const value = useMemo(() => expensive(x), [x]);

Memoize computation

const fn = useCallback(() => doThing(x), [x]);

Memoize callback

const theme = useContext(ThemeContext);

Consume context

const [state, dispatch] = useReducer(reducer, initial);

Reducer pattern

function useDebounce(value, delay) { ... }

Custom hook

const [email, setEmail] = useState('');
<input value={email} onChange={e => setEmail(e.target.value)} />

Controlled input

<input type="checkbox" checked={on} onChange={e => setOn(e.target.checked)} />

Controlled checkbox

<form onSubmit={e => { e.preventDefault(); submit(); }}>

Submit handler

<input ref={inputRef} defaultValue="hi" />

Uncontrolled input (ref)

const ThemeContext = createContext('light');

Create context

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

Provide context value

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>

Basic routes

<Link to="/about">About</Link>

Navigation link

const navigate = useNavigate();
navigate('/home');

Programmatic navigation

const { id } = useParams();

Read URL params

const [params] = useSearchParams();

Read query string

const Button = React.memo(({ onClick }) => ...);

Memoize component

const Heavy = lazy(() => import('./Heavy'));
<Suspense fallback={<Loader/>}><Heavy /></Suspense>

Code splitting with Suspense