Scribd
Upload
9 views

React 19 Features Explained

The document provides an overview of new features and hooks introduced in React 19, including use(), useFormStatus, useActionState, useTransition, useOptimistic, and createContext. It highlights improvements in data fetching, form handling, UI responsiveness, and server component integration, as well as changes in ref handling and automatic optimization of components. The author encourages readers to connect for further discussions on React and web development.

Uploaded by

anklet.react
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

React 19 Features Explained

The document provides an overview of new features and hooks introduced in React 19, including use(), useFormStatus, useActionState, useTransition, useOptimistic, and createContext. It highlights improvements in data fetching, form handling, UI responsiveness, and server component integration, as well as changes in ref handling and automatic optimization of components. The author encourages readers to connect for further discussions on React and web development.

Uploaded by

anklet.react
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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

You might also like