React Summit

React Summit 2023

This Workshop on React Performance covers various techniques and tools to analyze and optimize app performance. It includes using Chrome DevTools' Performance and Profiler panes, analyzing CPU activity and function calls, identifying expensive renders and components, debugging with 'why did you render', and optimizing React code and effects. The workshop also discusses the use of ConsoleTime API for profiling, optimizing the state manager, and analyzing memory performance. Overall, it provides valuable insights into improving the performance of React applications.

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 Masterclass

Ivan Akulov

React Summit US

React Summit US 2024

Hi everyone! I'm Rohit, a founding engineer at Tria. We are working on bringing the world to Web3 using names. My talk is about gaining performance and taking runtime to build time. There is an upward trend in libraries towards build time optimization, especially in React. Build time optimization improves performance, reduces bundle size, and provides more predictable software. Babel is a free and open source JavaScript transpiler that allows leveraging latest JavaScript features and moving computationally heavy logic from runtime to build time. Building a Babel plugin involves checking for a style prop inside an HTML tag and searching for aliases or token values. The visitor pattern is used to define the JSX type of node and access its path and attributes. The plugin can be customized for different utilities by defining aliases and tokens in a config file. Helpful resources for understanding and building custom Babel plugins include the Babel handbook, Babel docs, astexplorer.net, and the speaker's Twitter account.

We'll be discussing mainly the industry shift towards build time and why you'll be lacking behind if you don't learn about the intricacies of build time optimizations and modern architectures, and how you can leverage this new trending architecture to boost your product's performance many times.

Gain Performance! Take Your Run Time to Build Time

Rohit Singh

React Advanced

React Advanced 2023

Today's Talk focuses on implementing schedules and timelines using the PlanBy component. PlanBy is a React-based tool that offers a simple interface and features like sidebar, timeline, layout, and live program refreshing. It uses a custom virtualized view to handle large amounts of data efficiently. The component allows for easy customization and can be used to build schedulers, conference agendas, TV guides, and more. Installation is straightforward, requiring only a few components, one hook, and two wrappers.

Planby is a React based component for a quick implementation of Schedules, Timelines, Electronic Program Guide, Music/Sport events, Calendar Planner  and many more ideas.  It uses a custom virtual view which allows you to operate on a really big number of data. The component has a simple API that you can easily integrate with other third party UI libraries. The component theme is customised to the needs of the application design.

Implementation of Schedules and Timelines

Karol Kozer

TS Congress

TypeScript Congress 2023

Tibor Blanesy from Sonar presents advanced techniques for linting with ESLint, including the use of ControlFlowGraph to detect errors in code. The algorithm is based on liveness analysis, which identifies live variables at any point in the program. Additionally, the talk covers the computation of block sets using the difference between outset and kill set unionized with genset.

This talk will explore more advanced ways to write static analysis rules in ESLint using ESLint's control flow APIs. I will quickly explain what a control flow graph is and how you can use it to find issues in your code. I will show you how to detect when a value is assigned to variable uselessly and other logical problems you can detect using this technique.

Advanced linting rules with ESLint 

Tibor Blenessy

GraphQL is a strongly typed, version-free query language that allows you to ask for specific data and get it in JSON format. It simplifies data retrieval and modification by allowing the server to handle all necessary operations. Serverless architectures, such as AWS Lambda, are scalable, cost-effective, and good for event-driven applications. Event sourcing and CQRS are techniques that ensure consistency and separate reading and writing parts of an application. Building a GraphQL API with commands and queries can be achieved using AWS AppSync and DynamoDB. This approach offers low latency, scalability, and supports multiple languages. Challenges include application complexity, data modeling, and tracing, but starting with simplicity and making something work first can lead to success.

GraphQL is a powerful and useful tool, especially popular among frontend developers. It can significantly speed up app development and improve application speed, API discoverability, and documentation. GraphQL is not an excellent fit for simple APIs only - it can power more advanced architectures. The separation between queries and mutations makes GraphQL perfect for event sourcing and Command Query Responsibility Segregation (CQRS). By making your advanced GraphQL app serverless, you get a fully managed, cheap, and extremely powerful architecture.

Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS

Slobodan Stojanović

React Advanced 2022

Today's Talk dives deep into React Native development, exploring the development process, JavaScript-native communication, and app deployment. It highlights the app building process, the React Native Run iOS command, and development gestures for efficient execution. The Talk also emphasizes the recommended process for starting and testing your app, as well as handling the 'red screen of death' error by installing missing libraries and understanding the role of the UI manager in creating native views.

How do you start your app on your simulator in the morning? Do you always run react-native run-ios? If so, you might be wasting a lot of time. Let’s check out together what a React Native app looks like under the hood. It will help us to be more efficient on a daily basis. We’ll identify the shortest steps to execute daily actions, like starting our apps as fast as possible (no more unnecessary compilations of native modules!), or dealing with pesky red errors that metro throws at us.

What Happens When You Build Your App

Charlotte Isambert

GraphQL Galaxy

GraphQL Galaxy 2021

Uri from The Guild introduces GraphQL and its advantages over REST. Implementing GraphQL in production involves starting with a simple use case and using a product-driven schema approach. Code generation plugins and tools like GraphQL Mesh simplify the implementation of GraphQL. The workshop demonstrates how to install GraphQL Mesh, generate a schema, and configure sources. Envelope, a plugin system for GraphQL, provides customization and flexibility, simplifying server development and enhancing security.

There are always a lot of questions and conference talks about bringing GraphQL servers into production, but there aren’t a lot of good concrete steps and actions to follow. In the workshop Uri (The founder of The Guild) will walk you through The Guild’s process of bringing GraphQL Server into production. We will add: - Powerful Caching - Logging, Monitoring and tracing - Security features like Auth, Error Masking, Persisted Operations, Depth and Rate limit If you are planning to have your GraphQL server running in production, this is a must have workshop for you! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Everything You Need to Get Your GQL Server Production Ready

Uri Goldshtein

React Advanced 2021

This Talk covers advanced patterns for API management in large-scale React applications. It introduces the concept of an API layer to manage API requests in a more organized and maintainable way. The benefits of using an API layer include improved maintainability, scalability, flexibility, and code reusability. The Talk also explores how to handle API states and statuses in React, and provides examples of canceling requests with Axios and React Query. Additionally, it explains how to use the API layer with React Query for simplified API management.

In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Advanced Patterns for API Management in Large-Scale React Applications

Thomas Findlay

This talk explores how useState works under the hood and why it's important to understand. It addresses the common confusion around the callback to setState and provides insights gained from exploring React hooks source code. Knowing how useState works is important for learning patterns, debugging, and gaining confidence in our code. React manages the current value of hooks in a linked list and performs updates sequentially. React optimizes rendering by caching computations and performing shallow renders when the state doesn't change.

We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We Don’t Know How React State Hooks Work

Adam Klein

React Summit Remote Edition

React Summit Remote Edition 2021

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.

With React 16.0, Facebook has released an update to the React core reconciliation algorithm which was named ""Fiber"". Fiber allows React to break the limits of the call stack and pause/start rendering work at will. In this talk, we will explore why Fiber was necessary, cover some of the internal implementation details of Fiber, and see Fiber in action with React's experimental Concurrent Mode. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Inside Fiber: An Overview of React's Reconciliation Algorithm

Elad Tzemach

This Talk provides an introduction to React Staytools, explaining how to use the state and setState function to update a counter. It also delves into the inner workings of React rendering, discussing the update queue and re-rendering conditions. The Talk concludes by mentioning the different modes of updating and triggering re-renders in React, and encourages further exploration of the source code and discussion in Discord.

We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We Don’t Know How React State Hooks Work 

This talk explores how React Suspense and Concurrent mode can enhance the user experience by controlling loading areas, prefetching data, and reducing loading time. It demonstrates how UseTransition can remove unnecessary loaders by skipping the loading state if data arrives within a specified time. The speaker advises using these experimental features in personal projects rather than enterprise applications. The talk concludes with an invitation to join the journey at Postman and thanks to the organizers, sponsors, speakers, and audience for making the conference a success.

Put up your thinking caps with Suspense and Concurrent mode! In this talk, I would discuss how to improve the existing user experience with the magic of React’s Suspense and Concurrent mode for non-blocked rendering. The talk would highlight the best practices and guidelines for the same. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#advanced