Search results for "improve react performance":

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.
Crafting Pristine React: Best Practices for Maintainable Code
React Day Berlin 2023React Day Berlin 2023
29 min
Crafting Pristine React: Best Practices for Maintainable Code
Watch video: Crafting Pristine React: Best Practices for Maintainable Code
React best practices, including state management, component performance, testing, accessibility, and clean architecture, are discussed. The use of useMemo and useCallback should be limited to when necessary, and tools like React's new compiler and Million.js can aid in performance optimization. End-to-end testing and React Testing Library are important for critical functionalities. Accessibility is emphasized, and the use of the xCore/React package is recommended. Logic business can be extracted from components, and file naming and folder structure should be carefully considered. Import aliases and different folder structures can enhance code maintainability. The talk also touches on managing hooks and testing, and ends with a discussion on favorite pizza and online presence.
React Native, as seen on TV
React Summit 2022React Summit 2022
20 min
React Native, as seen on TV
This Talk discusses TV app development using React Native, focusing on limitations and specific considerations. The speaker demonstrates how to fetch and display random dog images using React Native hooks. They also explain how to handle focus and spatial navigation in TV apps, including using focus keys and a spatial navigation library. The Talk emphasizes the importance of optimization and performance in TV app development and suggests using useMemo and useCallback to avoid unnecessary re-renders. The speaker concludes by mentioning job opportunities at JustWatch.
Brace Your React, New Core Web Vitals are Coming
React Day Berlin 2023React Day Berlin 2023
30 min
Brace Your React, New Core Web Vitals are Coming
Watch video: Brace Your React, New Core Web Vitals are Coming
The Talk discusses the NextPaint metric, a new performance metric introduced by Google that measures the speed of clicks or keyboard input on a page. It explores how React rendering can impact the NextPaint metric and offers optimization techniques such as using the useTransition hook in React 18. The Talk also covers the changes introduced in React 18's rendering process, the impact of wrapping with suspense, and the replacement of the First Input Delay metric with the interaction to the next page. The limitations of useTransition and general React performance optimization strategies are also discussed.
Measuring and Improving React Native Performance
React Summit 2022React Summit 2022
19 min
Measuring and Improving React Native Performance
This Talk discusses mobile app performance and provides tips for performance analysis. It includes a performance test on the TF1 news app and demonstrates how to analyze JS performance with React DevTools. The Talk also explores optimizing rendering in React components, such as FlatList and nested lists with carousels. It concludes with strategies for optimizing the virtualized list and carousel to achieve better performance.
Scaling React-Three-Fiber Applications beyond the Hello World
React Summit 2023React Summit 2023
20 min
Scaling React-Three-Fiber Applications beyond the Hello World
Watch video: Scaling React-Three-Fiber Applications beyond the Hello World
WebGL has evolved from showcasing technology to being used in everyday applications like Google Maps and Figma. React and 3.js can be used together to build WebGL applications, allowing for reusable components and declarative development. Building complex 3D graphics applications requires efficient data structures, algorithms, and rendering techniques. The Flux CAD editor uses React, 3.js, and React ReFiber to handle complex engineering documents and optimize GPU utilization. Optimizing the render loop and GPU performance is crucial for improving WebGL application performance. Instance rendering can be used to optimize text rendering in WebGL applications, achieving efficient rendering of thousands of 3D characters.
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.
Patterns for Performance
React Advanced 2023React Advanced 2023
28 min
Patterns for Performance
Watch video: Patterns for Performance
This Talk discusses patterns for performance in React development, including addressing slow resizing in custom cell renderers. It explores optimizing React render performance by reducing excessive re-rendering and using direct style updates. The use of layout effect and callback refs is also highlighted as techniques to improve performance. Additionally, the Talk mentions the AG Grid and TanStack Table libraries, as well as upcoming features like grid state restoration.
Automated Performance Regression Testing with Reassure
React Advanced 2022React Advanced 2022
16 min
Automated Performance Regression Testing with Reassure
Today's Talk introduces Reacher, a performance monitoring tool for React and React Native codebases. It highlights the need for catching performance regressions early in the development process and identifies JavaScript misusage as a common source of performance issues. ReaSure, developed by Covstack, is presented as a promising library that integrates with existing ecosystems and provides reliable render time measurements and helpful insights for code review. Considerations for operating in a JavaScript VM are discussed, including JIT, garbage collection, and module resolution caching. Statistical analysis using the z-score is mentioned as a method for determining the significance of measurement results.
Should You Use React in 2023?
React Summit 2023React Summit 2023
31 min
Should You Use React in 2023?
Top Content
Watch video: Should You Use React in 2023?
Tru Narla
Jordan Gensler
2 authors
React is a popular choice, but there are claims that it's dead and should be replaced. React has good out-of-the-box performance and is suitable for most applications. React Native allows code sharing between React and React Native. When considering a migration from React to Svelte, there are trade-offs to consider. React offers a standardized way of working and easy onboarding.
Making Your React Apps Perform At Scale
React Summit 2020React Summit 2020
21 min
Making Your React Apps Perform At Scale
This Talk discusses making React apps more performant by analyzing their complexity, running performance tests, using tools like Lighthouse and the Profiler, and optimizing components and API calls. It also covers techniques for cleaning up existing apps, such as code splitting and tree-shaking. The main focus is on improving app performance by virtualizing lists, lazy loading, caching data, minimizing code and assets, and handling rendering errors.
Power Fixing React Performance Woes
React Advanced 2023React Advanced 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Rendering: To Sync or Not to Sync?
React Summit US 2023React Summit US 2023
28 min
Rendering: To Sync or Not to Sync?
Watch video: Rendering: To Sync or Not to Sync?
This Talk discusses rendering and synchronization in React 18. It addresses issues such as flashing rows and wiping out when scrolling. The use of usync-externalstore for concurrent reads and the potential misuse of APIs are explored. Debugging techniques using React Profiler and flush-sync are discussed. The talk also covers performance considerations for different machines and the importance of testing and considering alternative solutions.
React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Performance Debugging
React Advanced 2023React Advanced 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Invisible Hand of React Performance
React Summit 2024React Summit 2024
31 min
Invisible Hand of React Performance
React's improvements in performance, such as the introduction of useEffect, have gone unnoticed. useEffect simplifies synchronizing logic and improves performance by eliminating forced layout calculations. Update batching optimizes rendering by combining multiple set-state calls into a single render. React 18 introduces batched set-state calls for faster performance. React Suspense and selective hydration improve user experience and debugging performance issues is best done practically. Server components, recommended debugging tools, and framework choices are also discussed.
Doing the Least Amount of Work Possible: An Intro to Runtime Performance
React Summit Remote Edition 2021React Summit Remote Edition 2021
35 min
Doing the Least Amount of Work Possible: An Intro to Runtime Performance
This Talk on runtime performance covers various aspects such as understanding and fixing performance issues, optimizing performance and perceived performance, profiling runtime performance, analyzing performance and debugging memory leaks, and dealing with memory leaks. It also discusses the use of dev tools, CSS transforms, and layout in improving performance. The Q&A session addresses questions about libraries like Immutable.js, common trends in memory leaks, and the impact of animations on performance.
Using React to Build Performant Game UIs in Minecraft
React Advanced 2021React Advanced 2021
25 min
Using React to Build Performant Game UIs in Minecraft
Top Content
This Talk introduces the use of React and web technologies for building UIs in Minecraft. It discusses the challenges of onboarding new developers to the current tech and the benefits of using open standards. The speaker explains the use of Gameface, a solution for building game UIs with React and Webpack. The Talk also covers state management in a game environment and the use of facets for performance optimization. It concludes with an overview of the Oryui brand and the availability of resources on GitHub.
Building Better React Debugging with Replay Analysis
React Advanced 2023React Advanced 2023
31 min
Building Better React Debugging with Replay Analysis
Watch video: Building Better React Debugging with Replay Analysis
Today's Talk focused on building better React dev tools with replay time travel analysis. The React DevTools provide valuable insights into React apps, using a fiber data structure to represent component instances. Replay is a time-traveling debugger for React, with plans to make Chrome their primary recording browser. They extract React information from recordings using their time travel API and have built a UI for debugging and inspecting the content. The long-term goal is to have Replay work offline and in permanent record mode.
Inside Fiber: An Overview of React's Reconciliation Algorithm
React Summit Remote Edition 2021React Summit Remote Edition 2021
20 min
Inside Fiber: An Overview of React's Reconciliation Algorithm
React Fiber is a reconciliation algorithm introduced in React 16 to address laggy input fields and heavy rendering. The old stack reconciler caused a laggy experience by re-rendering the entire subtree immediately. React Fiber solves this by breaking work into incremental units and assigning priorities. It introduces concurrent mode to make apps responsive and adaptable. The useDeferredValue hook is commonly used to keep the interface responsive by rendering components immediately and others at a later time.
Visualising Front-End Performance Bottlenecks
React Summit 2020React Summit 2020
34 min
Visualising Front-End Performance Bottlenecks
React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.