A new way to handle form submissions and data mutations, simplifying pending states, errors, and optimistic updates. Works seamlessly with async functions.
<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.
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>;
}
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.
function MyInput({ placeholder, ref }) {
return <input placeholder={placeholder} ref={ref} />;
}
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);
Side Effects & Lifecycle
useEffect(() => {
return () => { };
}, []);
Empty dependency array `[]` means the effect runs only once on mount.
Functional Component
function Welcome({ name }) {
return <h1>Hello, {name}</h1>;
}
JSX Fragments
Return multiple elements without a wrapper div.
Passing & Receiving Props
<MyComponent name="Alice" age={30} onClick={handleClick} />
Handling Events
<button onClick={e => console.log(e)}>Click Me</button>
Ternary Operator
{ isLoggedIn ? <Profile /> : <Login /> }
Logical && Operator
{ isAdmin && <AdminPanel /> }
Extract component logic into reusable functions. Must start with `use`.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
return width;
}
Pass data through the component tree without prop-drilling.
const ThemeContext = createContext('light');
<ThemeContext.Provider value="dark">
...
</ThemeContext.Provider>
const theme = use(ThemeContext);
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]);
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() { ... }
}