React

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

---

React 16 (RN 0.50)

• React v16.0

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

React 17 (RN 0.64)

• React v17.0

• Progressive updates
• Adopting Concurrent Mode (Experimental)
• Introducing Concurrent Mode (Experimental)_
• Suspense for Data Fetching (Experimental)
• Concurrent UI Patterns (Experimental)
• Concurrent Mode API Reference (Experimental)

React 18 (RN 0.69)

• React v18.0

• Concurrent rendering (default)
  • Suspense
    • <Suspense fallback={<Loading />}> <Component /> </Suspense>
  • startTransition, useTransition (non-urgent/interruptible)
    • const [isPending, startTransition] = useTransition()
  • 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)

• React v19

• 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, useEffectEvent
• Server Components
• 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"
• 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 🧪

• React Labs: View Transitions, Activity, and more

---

• React Patterns
• Glossary + ELI5
• React Lifecycle Methods diagram