Skip to content

React

Jump to bottom
LeoTM edited this page Oct 22, 2025 · 88 revisions

https://github.com/leotm/react-native-template-new-architecture/wiki/Codemods

React 16 (RN 0.50)

  • use{State,Effect,Context,Reducer,Callback,Memo,Ref,ImperativeHandle,LayoutEffect}
  • Fragments, Suspense, StrictMode, Profiler, Portals, getDerivedStateFromError/componentDidCatch, ErrorBoundary, lazy
  • Stack Fiber Reconciler

React 17 (RN 0.64)

React 18 (RN 0.69)

  • Concurrent rendering (default)
    • Suspense
      • <ErrorBoundary fallback={<p>RIP</p>}> <Suspense fallback={<Loading />}> <Component /> </...> </...>
    • startTransition, useTransition (background/non-blocking/interruptible)
      • const [isPending, startTransition] = useTransition()
      • <button disabled={pending} onClick={() => { startTransition(async () => { await fetchData() }) }} >
    • useDeferredValue
    • useSyncExternalStore
      • const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot)
    • useInsertionEffect
    • useId (SSR)
  • Auto batching

React Native New Architecture (RN 0.76) ✨

React 19 (RN 0.78)

  • useEffect+useState+try/catch/finally use(fetchData)+<Suspense>, useContext use(Context)
    • auto: loading (wrap w Suspense) / error catching (!res.ok throw Error('rip')) / data
  • Actions: useActionState, useFormStatus, useOptimistic
  • Server Components
  • background Activity
    • {isShowingSidebar && (<Sidebar />)}
    • <Activity mode={isShowingSidebar ? "visible" : "hidden"}> <Sidebar /> </Activity>
  • React Forget React Compiler (discussions)
    • auto useCallback/useMemo (+inferred dep arrays)
    • can still "use no memo"
  • useEffectEvent
  • DevTools: TS support, perf (re-render) insights, perf tracks (scheduler), debug react 19 hooks, Server Components, Suspense, Activity, cleaner errors
  • eslint-plugin-react-hooks upg

React Experimental 🧪

Clone this wiki locally