LEVEL UP YOUR
CODE WITH
REACT-19
ANKIT KUMAR
New use() Hook
Used for data fetching and
consuming async values (like
context or promises).
index.jsx
// fetchData() is async API call function.
const data = use(fetchData());
return <div>{data.message}</div>;
01
useFormStatus
It detects if a form is submitting
to show loaders or disable
buttons.
index.jsx
// useFormStatus hook Example
function SubmitButton() {
const { pending } = useFormStatus();
return <>
<button type="submit" disabled={pending}>
{pending ? 'Submitting...' : 'Submit'}
</button>
</>
}
02
useActionState
It helps run async functions (like
form submits) and keeps track
of the result or response.
index.jsx
// useActionState hook Example
const increment = (prev) => prev + 1;
function StatefulForm() {
const [state, formAction] = useActionState(increment, 0);
return <form>
{state}
<button formAction={formAction}>Increment</button>
</form>
}
03
useTransition
useTransition in React performs
non-urgent updates, improving
UI responsiveness.
index.jsx
// useTransition hook Example
function MyComponent() {
const [isPending, startTransition] = useTransition();
const [count, setCount] = useState(0);
const increment = () => startTransition(
() => setCount(count + 1)
);
return <>
<button onClick={increment}>Increment</button>
{isPending ? <p>Loading...</p>: count}
</>
}
04
useOptimistic
Updates the UI instantly with a
predicted result while waiting
for the server
index.jsx
// useOptimistic hook Example
function MyComponent() {
const [count, setCount] = useState(0);
const [optimisticCnt, setOptimisticCnt] = useOptimistic(count);
const increment = async () => {
setOptimisticCnt(count + 1);
await fetch('/update-count', { method: 'POST' });
setCount(count + 1)
};
return <>
<button onClick={increment}>Increment</button>
<p>{optimisticCnt}</p>
</>
}
05
createContext
You can use context directly as
the provider eliminating
.Provider suffix.
index.jsx
// createContext hook Example
const ThemeContext = React.createContext("");
function App({ children }) {
return <ThemeContext value="dark">
{children}
</ThemeContext>
}
06
Passing ref Directly
In React 19, forwardRef is
deprecated; pass ref directly.
index.jsx
// ref Example
function MyInput({ ref, ...props }) {
// The 'ref' prop is passed directly to the input element.
// The rest of the props (like 'value', 'onChange', etc.) are
spread onto the input.
return <input ref={ref} {...props} />;
}
07
React Compiler
Now, React automatically optimizes
your components by tracking
dependencies.
No need for useMemo, useCallback, or
memo.
index.jsx
// Before React-19
const memoizedVal = useMemo(() => ExpensiveVal(a,b),[a,b]);
// After React-19
const value = expensiveValue(a,b); // Automatically optimised
08
Server Components
Native integration to server
components providing SEO &
improved performance
index.jsx
// Server Component Example
"use server";
export default function ServerComponent() {
const data = fetchDataFromApi();
return <div>{data}</div>
}
09
Thank You!
Thanks for going through this ReactJS update guide.
I’d love to connect and chat more about React or
web development!
Connect on LinkedIn: in/ankit-kumar789
