React-18
Understanding the difference between React useEffect and useLayoutEffect hooks
useEffect hook and useLayoutEffect hook differ in the timing of their invocation. useEffect hook runs asynchronously after the DOM has been painted whereas useLayoutEffect runs synchronously after all DOM mutations.Know about the useInsertionEffect hook in React 18
The useInsertionEffect hook in React 18 is mostly for CSS-in-JS libraries for inserting global DOM nodes like 'style' or SVG 'defs' in the document.
React 18 adds onResize event to video elements
Before React 18, onResize handlers were ignored on video elements. React 18 now adds support for the onResize media event.React 18 allows components to render 'undefined'
Before React 18, if we did not want to render anything, we had to return 'null' or an empty fragment. React now allows undefined to be rendered.Deep dive into the new Suspense Server-side Rendering ( SSR ) architecture in React 18
The new SSR foundation allows us to combine streaming server-side rendering with a new approach to hydration - Selective Hydration! It also prioritizes hydrating the parts the user is interacting with, creating an illusion of instant hydration.Sneak peek into React 18 useDeferredValue hook
The useDeferredValue hook allows us to mark some tasks as less important, making the app feel more responsive, thereby improving the user experience.Meet the new hook useSyncExternalStore, introduced in React 18 for external stores
The most significant update of React 18 comes with concurrent rendering. However, with the external store, there are some issues(tearing) that come up with concurrent rendering. To fix these issues, React 18 provides a new hook, useSyncExternalStore.React 18 provides useId API for generating unique IDs on both the client and server
React 18 introduces a new hook API - useId, that generates stable ids during server rendering and hydration to avoid mismatches.Keep the React app responsive even during large screen updates with startTransition API introduced in React 18
The newly introduced startTransition API helps to improve the user interactions by categorizing the state updates as urgent and non-urgent.React 18 improves the existing behavior of Suspense
React 18 delays committing everything inside the Suspense boundary (the suspended component and all its siblings) until the suspended data resolves.
Newer