# Everything you need to know about React 19 ## Actions - `useActionState` can be used to control the form ## React Compiler - Managing `useCallback` and `useMemo` is hard - Compiler takes care of adding these hooks so developer doesn't have to add it. ## New Hooks - `useActionState` - `useFormStatus` - returns `isPending` state which can be used to show loading indicator until form is submitted - `useOptimistic` - Optimistically sets the state to success action and reverts back if there is an error - error, isSubmit and pending - `use` - Declarative resource reading during render - `ref` as a Prop - React Server Components - `use server;` - Improved Error Handling - Document Metadata ## Micro-frontends in Scaling Front-end Architectures **What are micro-frontends?** - Design approach in frontend development where a monolith application into smaller applications, that can be deployed independently - Decouple Major Features to separate apps - Provide APIs to fetch necessary data **Advantages** - No direct communication - No dependency between micro-frontends - Breaking changes in one application has no impact on other frontends - Container - Product List application - Cart Application **Integration** - Container needs access to the source code of all the micro frontend applications Types of Integration - Build time Integration - Run time Integration - Server Integration (Payload.js) How to implement Integration? - No single perfect solution to this - Each have it's pros and cons **Build Time Integration** - Easy to setup and understand - Container needs to be deployed everytime any micro frontend is deployed **Run Time Integration** - MicroFrontend can be deployed independently at any time - Different versions can be deployed and container can decide which one to choose - Tooling setup is far more complicated **Run-Time Integration with Webpack Module Federation** - Harder to setup - Most flexible and performant solution - Basic understanding of webpack is required **Steps to implement Module Federation** - Designate one app as the Host and other as the Remote - In the Remote, decide which modules (files) you want to make available in other projects - Setup Module Federation plugins to expose those files **Single-SPA** - Micro-frontend orchestration framework - Manages the lifecycle of multiple MFEs - Handles routing and lifecycle events out of the box **Managing Shared state between Micro-Frontends** - Using a global store - Shared State Management Library (Redux/Zustand) - Event Bus or Pub/Sub Model - MFEs communicate via a central bus event **When should you not use Micro-Frontends** - The application is small and not expected to grow significantly - Team Size doesn't justify the added complexity # Building Applications at the Edge ## Why deploy applications at the edge? - Latency - Availability - Compliance # Real-time face detection in React using Tensorflow.js - Face-api.js **What is Tensorflow** - Open Source Machine Learning Framework for building and training machine models **How it works** # AI for Frontend Developers - `npm i ai` AI SDK from Vercel - Vercel ai Tools - Rag - Embeddings - Chunks # Empowering AI agents using composio