#react 18

Subscribe
Learn everything about the newest React 18 APIs and best practices using the most latest React library version.
A Practical Guide for Migrating to Server Components
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Server Components: The Epic Tale of Rendering UX
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Top Content
Watch video: Server Components: The Epic Tale of Rendering UX
This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Deep Diving on Concurrent React
React Advanced Conference 2022React Advanced Conference 2022
29 min
Deep Diving on Concurrent React
The Talk discussed Concurrent React and its impact on app performance, particularly in relation to long tasks on the main thread. It explored parallelism with workers and the challenges of WebAssembly for UI tasks. The concepts of concurrency, scheduling, and rendering were covered, along with techniques for optimizing performance and tackling wasted renders. The Talk also highlighted the benefits of hydration improvements and the new profiler in Concurrent React, and mentioned future enhancements such as React fetch and native scheduling primitives. The importance of understanding React internals and correlating performance metrics with business metrics was emphasized.
Understanding React’s Fiber Architecture
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Inside Fiber: the in-depth overview you wanted a TLDR for
React Summit 2022React Summit 2022
27 min
Inside Fiber: the in-depth overview you wanted a TLDR for
This Talk explores the internals of React Fiber and its implications. It covers topics such as fibres and units of work, inspecting elements and parent matching, pattern matching and coroutines, and the influence of coroutines on concurrent React. The Talk also discusses effect handlers in React, handling side effects in components, and the history of effect handlers in React. It concludes by emphasizing the importance of understanding React internals and provides learning resources for further exploration.
Concurrent Rendering Adventures in React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
Cracking the Concurrent Mode
React Advanced Conference 2021React Advanced Conference 2021
30 min
Cracking the Concurrent Mode
Sudhanshu Yadav discusses the incremental concurrent feature in React 18 and the need for concurrent mode to provide a better user experience. Time slicing is the key pattern enabling concurrent features. Background rendering and unit of work are used to achieve asynchronous rendering and eventual consistency. Concurrent mode introduces a new pattern called differing for immediate rendering and adjusting based on available resources. React provides APIs for deferred updates and transitions. Implementing concurrent mode APIs can be complex, but it offers benefits like avoiding update starvation and reusing work. Scheduling and slots are used to control execution and dynamic FPS control. Handling multiple transitions can be challenging, but the React 18 working group discussions provide insights into the team's efforts to improve the user experience.
Living on the Edge
React Advanced Conference 2021React Advanced Conference 2021
36 min
Living on the Edge
The Talk discusses the future of React and introduces new APIs, including streaming rendering and server components. React Suspense allows for asynchronous loading of components and data fetching. The use of serverless computing, specifically Cloudflare Workers, is explored as a way to improve performance. The Talk emphasizes the potential for simplifying the React ecosystem and the excitement about the new API.
Getting Started with Suspense and Concurrent Rendering in React
React Summit 2020React Summit 2020
125 min
Getting Started with Suspense and Concurrent Rendering in React
Featured Workshop
Maurice de Beijer
Maurice de Beijer
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `<Suspense />` component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using <Suspense />, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the <SuspenseList /> component.
Explore what's new in the 2024 editions of JSNation and React Summit!
0 min
Explore what's new in the 2024 editions of JSNation and React Summit!
Article
JSNation and React Summit are the key JavaScript and React conferences of the year, expecting over 3K attendees, featuring 110+ speakers, and offering 15+ Free and PRO workshops altogether. All this excitement will be in Amsterdam and online in June! As always, you can expect deep and interactive talks, Q&A sessions, a food truck festival, activities to explore Amsterdam, and a ferry ride to the venue. And what's fresh this year?More Connections:
Making connections is the main focus of JSNation and React Summit  in 2024! Arriving solo? Fear not! During the conference days, you'll have plenty of opportunities to network and get to know others. If you're with friends, that's also awesome – you'll have many things to enjoy together!• Remember the Treasure Hunt? Or those puzzle-collecting competitions with fellow attendees? If you've been to one of GitNation conferences in-person, you definitely should. It's all about scouring the venue for treasure and getting prizes. This year, we've crafted something simpler to participate in, yet as much fun!• There are more gaming areas where you can relax during the breaks.• Compete in arcade machines to see who is better at football or kart racing.• Join in the buddy matchmaking activity to connect with like-minded attendees for engaging conversations.More Excitement:
Fun is something we all need, especially considering how focused we are during the workdays. So adding a bit more excitement to the conference can't be overlooked!• Start your day with a smartphone orchestra performance! The details are under wraps until you arrive – just be there on time.• We're not letting the biggest JavaScript and React party end too soon – come join us for an after-afterparty at a special place, where the fun keeps rolling! And guess what? The party doesn't stop there – you'll also receive a list of cool bars to explore and keep the networking alive until the morning!• What is more, this year we're inviting you to join the C3 Dev Festival party. Get ready to dive into performances from over 18 DJs, live coders, and famous artists!More Gastronomic Delights:
We understand that good food matters, so there will be something tasty for everyone!• Rest assured, we'll have healthy, vegan, and gluten-free options available.• Are you a burger lover? No worries, we've doubled up on last year's most popular food truck with burgers.• Hungry for more? We'll hook you up with a list of good restaurants to check out before or after the conference.More Ease and Relaxation:
We're working hard to ensure your conference experience goes smoothly! So you can focus on networking, learning, and having fun without any distractions!• Take part in uninterrupted discussion rooms located in quiet zones, speed through registration with faster lines at the pre-party and badge pick-up, and easily find your way around the conference with better signage.• Stay focused with soundproofing improvements and stay connected with discounted e-SIMs with data and charging stations at the working area.• Plus, enjoy breaks every 4 talks on remote days to stay refreshed and engaged.With an array of enhancements inspired by your valuable feedback, JSNation and React Summit 2024 promise an experience like never before. Have more ideas stirring in your mind? After each conference, we send out a link to gather feedback. If you could spare a moment to share your thoughts, we'd really appreciate it! Your input is valuable to us. We're committed to continually improving for you. Can’t wait to see you at the conference!
Content Security Policy with Next.js: Leveling Up your Website's Security
React Summit US 2023React Summit US 2023
9 min
Content Security Policy with Next.js: Leveling Up your Website's Security
Watch video: Content Security Policy with Next.js: Leveling Up your Website's Security
Lucas Estevão, a Principal UI Engineer and Technical Manager at Avenue Code, discusses how to implement Content Security Policy (CSP) with Next.js to enhance website security. He explains that CSP is a security layer that protects against cross-site scripting and data injection attacks by restricting browser functionality. The talk covers adding CSP to an XJS application using meta tags or headers, and demonstrates the use of the 'nonce' attribute for allowing inline scripts securely. Estevão also highlights the importance of using content security reports to identify and improve application security.
Concurrent React Made Easy
React Advanced Conference 2023React Advanced Conference 2023
23 min
Concurrent React Made Easy
Watch video: Concurrent React Made Easy
Today's Talk introduces concurrent React and highlights the importance of fast and slow updates in user interfaces. It explains how concurrent rendering improves UI performance by allowing fast updates to proceed without being blocked by slow updates. The concept of assigning priorities to renders is discussed, with high priority renders being synchronous and low priority renders being interruptible. The Talk also mentions the benefits of using concurrent features in navigation and list filtering. Overall, concurrent React enhances rendering with interruptibility and prioritization, making the application feel faster and more responsive.
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
React Advanced Conference 2023React Advanced Conference 2023
29 min
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
Watch video: How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
Jerel Miller
Alessia Bellisario
2 authors
This Talk discusses using suspense and GraphQL with Apollo client to build great end user experiences. It explains the core concepts of React suspense and how to fetch data in suspense with Apollo client's new suspense hooks. The Talk also covers optimizing the loading experience by adding suspense boundaries, using the defer directive in GraphQL, and integrating suspense hooks with React 18 transitions. Future plans include new APIs like suspenseful use fragment and lazy use background query in Apollo client 3.9. Testing strategies for suspense in components and customizing loading states are also mentioned.
Staying Safe In a Concurrent World
React Day Berlin 2022React Day Berlin 2022
30 min
Staying Safe In a Concurrent World
The talk discusses the ramifications of the new concurrent features in React and the misconceptions around the rendering model. It explores the changes in the rendering process and the need to handle state carefully. The talk also highlights the challenges in managing communication with the outside world and the recommended libraries for synchronization. It mentions the benefits of using concurrent mode in existing frameworks and the difficulties in building demos and enforcing immutability. Finally, it emphasizes the benefits of concurrent mode for heavy components.
Zero Bundle Size Server Components
React Advanced Conference 2022React Advanced Conference 2022
17 min
Zero Bundle Size Server Components
React Server Components is a recent feature introduced with the React team and launched with Next.js 12. They allow for rendering components on the server, improving performance and data fetching. Server components can be used alongside client-side rendering and provide direct access to server resources. However, they are still in the experimental stage and have some limitations, such as not being able to use hooks or event handlers. Challenges include importing server components in client components and making third-party API calls.
Staying Safe in a Concurrent World
React Advanced Conference 2022React Advanced Conference 2022
22 min
Staying Safe in a Concurrent World
This talk explores the implications of the new concurrent features in React 18 and how they impact developers. It discusses the core premise of React and the importance of pure function components. The talk also addresses misconceptions about React's rendering process and the prevention of tearing in applications. Additionally, it highlights the reconciliation and commit phases in React and the challenges of dependency management in state management libraries.
React Slots: a New Way of Composition
React Advanced Conference 2022React Advanced Conference 2022
21 min
React Slots: a New Way of Composition
Top Content
Today's Talk introduces React Snots, a new way of composition for design systems. The configuration way provides flexibility but can lead to uncontrolled use cases and wrong patterns. React Slots RFC was created to address the limitations of React's support for web components and slots. It introduces createHost and createSlot APIs to enable component composition and solve previous problems. React Slots RFC allows for flexible component styling and the creation of complex structures without rendering them to the browser.
The Subtle Art of "Subtle Loading"!
React Summit 2022React Summit 2022
10 min
The Subtle Art of "Subtle Loading"!
This Talk explores the concept of subtle loading in software development, focusing on techniques to provide a fast and seamless user experience. Tips include avoiding waterfall loading, optimizing loading sequences, and handling loading scenarios for users on faster connections. The use of React 18 APIs, such as start transition, is recommended to achieve an optimistic loading experience. Overall, the Talk emphasizes the importance of improving user experience through subtle loading techniques.
Let’s Talk about Re-renders
React Summit 2022React Summit 2022
23 min
Let’s Talk about Re-renders
Top Content
This Talk discusses React performance and how re-renders can affect it. It highlights common mistakes and misconceptions, such as the overuse of useMemo and useCallback hooks. The importance of React.memo in preventing unnecessary child component re-renders is emphasized. Creating components in render functions is identified as a major performance killer, and the benefits of moving state down and wrapping state around children are explained. The Talk also covers optimizing component rendering through memoization and provides a recap of the key points.
Coming in React18: startTransition
React Advanced Conference 2021React Advanced Conference 2021
8 min
Coming in React18: startTransition
Start Transition is a new API in React 18 that allows us to keep our applications interactive and responsive even while big updates are happening behind the scenes. In React 18, we have concurrency rendering, which allows us to differentiate between urgent and less urgent updates. By using the Start Transition API, we can mark less urgent actions as transitions and prioritize more urgent actions, improving the user experience. Implementing the Start Transition API in React 18 is easy and doesn't break existing code. It's worthwhile to start transitioning in your projects for improved user experience.