What new in ReactJS 18

ReactJS 18 became available March 29. There are a bunch of new features are come in new version of ReactJS.

Many of this features are about improving performance and concurrency in ReactJS. About concurrency you can read this article.

Automatic batching

Automatic batching for asynchronius functions. Batching it is when React groups multiple state updates into one re-render to improve performance. Without automatic batching we batch only updates within event handlers in React.

Strict Mode

Also Strict Mode was updated . Now Strict Mode will show us in console warnings when we use depricated methods.

Suspense

Update of Suspense component - now we can use this component with SSR.

New hooks

There are also new hooks in ReactJS 18.

Hooks became available in ReactJS 16.8. They give us a ability of using state and other functionality of classe's components in functional components. There are some new hooks are come to us in ReactJS 18.

useTransition

Returns a stateful value for the pending state of the transition, and a function to start it.

The hook allows us to improve the performance of the application by wrapping the logic with a special function. In such function you can place a logic, which may get a lot of time. For example request to server.

To work with this hook, we import useTransition from "react".

useTarnsition returns two variables. First variable is a boolean variable. Second variable is a function which will start transition. This function, startTransition, we can import from "react", but it is not recomended to use method from "react" in functional components. It is better get this function from hook.

const [isPending, startTransition] = useTransition();

The function takes as an argument a callback function that is immediately called. While this callback function is running and before it completes, the boolean variablebecomes true. After all the logic inside the startTransition function is complete, the boolean variablebecomes false. And we can use this boolean variable in UI to show that something is going on.

startTransition(() => {
  // Some functions
});

This hook can significantly improve the UX of the application.

useDeferredValue

useDeferredValue accepts a value and returns a new copy of the value that will defer to more urgent updates. If the current render is the result of an urgent update, like user input, React will return the previous value and then render the new value after the urgent render has completed.

The hook takes an argument - data that needs to be cached now and updated only when all other changes have passed. Thus, the hook caches values that may not update urgently, and updates this value when more urgent changes pass. Like delayed rendering of certain values.

const deferredPosts = useDeferredValue(posts);

Hooks useTransition and useDeferredValue are interchangeable and should not be used together.

useId

This hook generate one uniq id.

useId is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches.

const id = useId();

For example, you can use it as id for label and inputs.

<>
  <label htmlFor={id}>Do you like React?</label>
  <input id={id} type="checkbox" name="react"/>
</>

useSyncExternalStore

useSyncExternalStore is a hook recommended for reading and subscribing from external data sources in a way that’s compatible with concurrent rendering features like selective hydration and time slicing.

This hook is come from library "use-sync-external-store", which now is a part of ReactJS.

External store it something outside of component - websockets, redux store, global variables, DOM state, etc. We can subscribe to this store.

Inner store it is props, useState, useReducer, etc.

This hook accept three arguments. All three arguments is callback functions:

• *subscribe *: It is a function to register a callback that is called whenever the store changes.
• getSnapshot: It is function that returns the current value of the store. You can use it to check if the subscribed value has changed since the last time, it was rendered.
• getServerSnapshot(optional): It is function that returns the snapshot used during server rendering.

This hook returns new state, which can we use in UI.

useInsertionEffect

The signature is identical to useEffect, but it fires synchronously before all DOM mutations. Use this to inject styles into the DOM before reading layout in useLayoutEffect. Since this hook is limited in scope, this hook does not have access to refs and cannot schedule updates.

This hook act like the useLayoutEffect hook, but useInsertionEffect will run before useLayoutEffect and dont have access to refs. Hook accept callback function.

Thanks for your attention!