Introduction to React-18 -2

  1. useDeferredValue
  2. useSyncExternalStore
  3. useInsertionEffect
useTransitionconst [isPending, startTransition] = useTransition();useDeferredconst deferredValue = useDeferredValue(value);
  • startTransition is used when triggering an update (i.e. setState ) in an event handler
  • useDeferredValue is used when receiving new data from a parent component (or an earlier hook in the same component)
function ProductList({ products }) {
const deferredProducts = useDeferredValue(products);
return (
<ul>
{deferredProducts.map((product) => (
<li>{product}</li>
))}
</ul>
);
}
function Typeahead() {
const query = useSearchQuery('');
const deferredQuery = useDeferredValue(query);

// Memoizing tells React to only re-render when deferredQuery changes,
// not when query changes.
const suggestions = useMemo(() =>
<SearchSuggestions query={deferredQuery} />,
[deferredQuery]
);

return (
<>
<SearchInput query={query} />
<Suspense fallback="Loading results...">
{suggestions}
</Suspense>
</>
);
}
const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);
  • subscribe: function to register a callback that is called whenever the store changes.
  • getSnapshot: function that returns the current value of the store.
  • getServerSnapshot: function that returns the snapshot used during server rendering.
const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
const selectedField = useSyncExternalStore(store.subscribe, () => store.getSnapshot().selectedField)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store