React New stuffs - rs-hash/Senior GitHub Wiki

React Versions

React latest version - React 18 ( March 2022 ) React-Redux latest version - 8.1.2 Redux toolkit latest version - 1.9.5 Redux Toolkit was first introduced on September 22, 2019

Steps to update to React 18

  1. Import React 18 and react dom
  2. import ReactDOM from 'react-dom' to 'react-dom/client'
  3. ReactDOM.render() -> ReactDOM.createRoot(), root.render()

React 18 new features

1. Concurrency - state update prioritization

- useTransition() - > hook
- startTransition() -> class components
- useDeferredValue - > use when we dont have control over state

const [isPending, startTransition] = useTransition()

function updateFilterHandler(event){
   startTransition(()=>{
       setFilterTerm(event.target.value) // lower priority
   })
}

isPending // used for fallback scenario

import { useDeferredValue } from "react";

function productList({pendingData}){

 const deferredProducts = useDeferredValue(pendingData)

return(
   {deferredProducts.map(item=> <li>{item}</li>)}
)
}

2. New hooks for Library authors

- useSyncExternalStore()
- useInsertionEffect()
- useId() - generates Random unique ID

3. State Batching - grouping multiple state updating calls together and calling as one update call

- It exisited in React 17 but it happened only inside synchronous function calls and now it's available for async calls - promise, setTimeout

4. Suspense

- can be used to wrap around lazy loaded components
- enables suspense for server side rendering
⚠️ **GitHub.com Fallback** ⚠️