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}
  • Fragment, Suspense, StrictMode, Profiler
  • ErrorBoundary(react-error-boundary), Portal, lazy
    • nb: try/catch: promise, !res.ok: http (e.g. 404)
  • Stack Fiber Reconciler

React 17 (RN 0.64)

React 18 (RN 0.69)

  • Concurrent rendering (default)
    • Suspense wait for children
      • <ErrorBoundary fallback={<p>RIP</p>}> <Suspense fallback={<Loading />}> <Component /> </...> </...>
    • startTransition, useTransition (background/non-blocking update, old ui still visiable/interactive)
      • const [isPending, startTransition] = useTransition()
      • <button disabled={pending} onClick={() => { startTransition(async () => { await fetchData() }) }} >
      • wrap w ErrorBoundary>Suspense>Component as usual
    • 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 use(fetchData), useContext use(Context)
    • wrap w ErrorBoundary>Suspense>Component as usual
  • 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
  • ViewTransition
  • 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