React.js v19

Modern Cheatsheet • by @CodersStudy

🎬

React 19: Actions

A new way to handle form submissions and data mutations, simplifying pending states, errors, and optimistic updates. Works seamlessly with async functions.
// The 'action' can be an async function
<form action={submitAction}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
Related Hooks
useActionState: Manages state for actions (pending, data, error).
useFormStatus: Provides status of the parent form submission.
useOptimistic: Apply temporary UI changes before an async action completes.

React 19: The `use` Hook

A versatile hook to read the value of resources like Promises or Context. Can be used inside loops and conditionals, unlike other hooks.
Reading Context
import { use, createContext } from 'react';
const ThemeContext = createContext('');
function Heading() {
const theme = use(ThemeContext);
return <h1>Current theme: {theme}</h1>;
}
Reading a Promise (with Suspense)
function Message({ messagePromise }) {
const message = use(messagePromise);
return <p>Here is the message: {message}</p>;
}
🤖

Compiler & `ref` Prop

React Compiler (Memoization)
React 19 introduces an optimizing compiler that automatically memoizes components and hooks. This greatly reduces the need for manual optimization with `useMemo`, `useCallback`, and `React.memo`.
`ref` as a Prop
You no longer need `forwardRef` to pass a `ref` to a functional component. You can just pass it as a regular prop.
// No more forwardRef needed!
function MyInput({ placeholder, ref }) {
return <input placeholder={placeholder} ref={ref} />;
}
🪝

useState Hook

Basic State
const [count, setCount] = useState(0);
Functional Updates
Use a function to set state when the new state depends on the previous one.
setCount(prevCount => prevCount + 1);
⚡️

useEffect Hook

Side Effects & Lifecycle
// Runs after mount and when dependencies change
useEffect(() => {
// Side effect logic...
return () => { /* Cleanup */ };
}, [/* dependencies */]);
Empty dependency array `[]` means the effect runs only once on mount.
📖

Components & JSX

Functional Component
function Welcome({ name }) {
return <h1>Hello, {name}</h1>;
}
JSX Fragments
Return multiple elements without a wrapper div.
<>...</>
🎁

Props & Event Handling

Passing & Receiving Props
// Pass a string, number, and function
<MyComponent name="Alice" age={30} onClick={handleClick} />
Handling Events
<button onClick={e => console.log(e)}>Click Me</button>

Conditional Rendering

Ternary Operator
{ isLoggedIn ? <Profile /> : <Login /> }
Logical && Operator
{ isAdmin && <AdminPanel /> }
🛠️

Custom Hooks

Extract component logic into reusable functions. Must start with `use`.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
// ... effect to listen to window resize
return width;
}
🌐

Context API

Pass data through the component tree without prop-drilling.
const ThemeContext = createContext('light');
<ThemeContext.Provider value="dark">
...
</ThemeContext.Provider>
// In React 19, `use(Context)` is preferred
const theme = use(ThemeContext);
🚀

Performance Hooks

These are less necessary with the React 19 Compiler, but useful to know.
useMemo: Memoizes a calculated value.
useCallback: Memoizes a function.
const memoizedValue = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);
🛡️

Error Boundaries

A class component that catches JS errors in its child component tree. There is no hook equivalent yet.
class ErrorBoundary extends React.Component {
constructor(props) { ... }
static getDerivedStateFromError(error) { ... }
componentDidCatch(error, info) { ... }
render() { ... }
}

Modern Cheatsheet • by @CodersStudy

React js tailored for v19