React Cheatsheet

JSX

JSX lets you write HTML-like code inside JavaScript. React uses JSX to describe what the UI should look like. Remember: you must return one root element.

const element = <h1>Hello, world!</h1>;

Components

Components are reusable pieces of UI. A component is just a function (or class) that returns JSX. Functions are the modern way to create components.

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

Props

Props are inputs to components. They make components reusable by passing data. Think of props like “arguments” to functions.

function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

<Welcome name="Alice" />

State

State is data that changes over time. React’s useState hook lets components “remember” values between renders.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Events

You can handle events (like clicks or input changes) in React by attaching functions. Use camelCase (e.g., onClick).

function Button() {
  function handleClick() {
    alert("Clicked!");
  }
  return <button onClick={handleClick}>Click me</button>;
}

Conditional Rendering

Use conditions to show different UI. You can use if/else or the&& operator.

{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in</p>}

Lists & Keys

Use map() to render lists. Always give each element a unique key for better performance.

const items = ["A", "B", "C"];
<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

useEffect

The useEffect hook runs side effects like fetching data or updating the document title.

import { useEffect } from "react";

useEffect(() => {
  console.log("Component mounted");
}, []);

Context API

Context lets you share data across components without passing props manually at every level.

const UserContext = React.createContext();

function App() {
  return (
    <UserContext.Provider value="Alice">
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const user = React.useContext(UserContext);
  return <h1>Hello {user}</h1>;
}

useRef

useRef stores a mutable value that persists between renders. Often used to access DOM elements directly.

const inputRef = useRef();

<input ref={inputRef} />

Fragments

Fragments let you group a list of children without adding extra nodes to the DOM.

return (
  <>
    <ChildA />
    <ChildB />
  </>
);

useReducer

useReducer is an alternative to useState for complex state logic involving multiple sub-values or when the next state depends on the previous one.

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

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    default:
      throw new Error();
  }
}

Performance Hooks

useMemo caches the result of a calculation. useCallback caches a function definition.

// Returns a memoized value
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

// Returns a memoized callback function
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Custom Hooks

Extract component logic into reusable functions. Custom hooks must start with "use".

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

Portals

Portals provide a way to render children into a DOM node that exists outside the hierarchy of the parent component.

import { createPortal } from 'react-dom';

return createPortal(
  <div>Modal Content</div>,
  document.body
);

How to use this page

1. Start with JSX and learn how to build components.
2. Understand props and state to manage data flow.
3. Practice handling events and conditional rendering.
4. Explore hooks like useState and useEffect.
5. Use Context to share data across components.