#react

Subscribe
We're bringing free articles, videos, courses, and tutorials to help you learn all about ReactJS, whether you're a beginner or a pro. Introduced in 2011, the framework has become essential for web and mobile developers alike, enabling modern apps by look and function. And while other JS tools have expanded or revised its original notions, React's popularity is still the one to beat.
Panel Discussion: Future of React
React Summit US 2024React Summit US 2024
39 min
Panel Discussion: Future of React
Watch video: Panel Discussion: Future of React
Kent C. Dodds
Shruti Kapoor
Mark Erikson
Eli White
Mofei Zhang
Theo Browne
Tom Occhino
7 authors
We're going to be doing a future of React panel discussions. React 19 is in RC stage and we're excited to hear when it will be stable. The React compiler is here to stay and is the future of developer experience and tooling. React 19 brings exciting features like RSCs and consolidation of the framework. React's commitment to community and innovation is commendable. The React team values feedback and actively engages with the community. React's future includes supporting the community and enabling smooth migrations. There's a need to teach underlying concepts and educate AI systems. Teaching and adapting to React can be challenging. The React compiler changes default re-rendering behavior. Collaboration with Next.js and Vercel has been valuable for React's development. Appreciation for the community and partnerships with Vercel and Microsoft.
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
React Summit US 2024React Summit US 2024
30 min
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Watch video: Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Hi folks, in this Talk we learn about React and Chrome DevTools. We explore the new AI Assistant panel in DevTools that helps with UI tweaking. React DevTools now supports Gemini AI model for error fixing. Extensibility is important and React DevTools has features like highlight updates and server components. We also learn about server logging in the browser console and toggling suspense fallbacks. Browser DevTools allow experimenting with local overrides and improving color contrast. Advanced features include overriding headers, network panel customization, and performance tooling. We also discuss Core Web Vitals, optimizing pages, and debugging UI with DevTools. There are fun tips for enhancing animations and logging workflow. The Talk ends with Q&A and sharing/removing features based on user feedback.
Out Of Order Streaming (The Secret Powering Modern React)
React Summit US 2024React Summit US 2024
29 min
Out Of Order Streaming (The Secret Powering Modern React)
I'm the second-best TypeScript YouTuber. I'm giving a talk on streaming in React and the benefits it brings to applications. Streaming allows for faster perceived loading times by sending partial HTML to the browser, rendering it and waiting for the rest to complete. Server-side loading can cause delays, but this can be improved by caching HTML on a CDN. Streaming HTML in a different order has been a challenge, but there are JavaScript solutions. Optimizing HTML streaming with Suspense and dynamic I.O. can further improve loading times. Using suspense in client-side rendering and addressing challenges with Next.js React model are interesting patterns. Caching can now be done at a more granular level, improving SEO and reducing load on the host server. Rendering on the server is not a big penalty compared to multiple API requests. Thank you all.
AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)
Is React Really Dying?
React Advanced 2024React Advanced 2024
29 min
Is React Really Dying?
Is React really dying? React is dead. Let's take a look at the numbers. Svelte is getting 1.5 million downloads per week. Angular is pulling 3.5. Probably not a competitor with React. React dwarfs everything with 25 million downloads a week. React is incredibly popular with 4 million users and developers. Despite some criticism, a survey shows that 71% of respondents liked React, while only 28% didn't. React's flexibility and options can be overwhelming for beginners. React's complexity has increased, causing confusion for beginners. Memory management, overcomplicated architecture, and innovation fatigue are common challenges in React. React 19 is delayed due to suspense issues. React server components are a favorite innovation. Qwik's hydration model is cool. Qwik is amazing, and it would be cool to see something like it for React. AI can help you get 80% there, but you still need an actual developer to tweak and clean up the code. Tab AI keeps your workflow going. React's popularity is undeniable. The momentum behind React is strong, and it's unlikely to fade away anytime soon.
Future of Frontend Frameworks Fireside Chat
React Summit 2024React Summit 2024
28 min
Future of Frontend Frameworks Fireside Chat
Fred K. Schott
Minko Gechev
Ryan Carniato
Daniel Afonso
Aakansha Doshi
Tim Neutkens
6 authors
Signals are being adopted by popular frameworks, enabling code reuse and improved tooling. While merging between frameworks is unlikely, they are learning from each other and adopting shared practices. It is important to embrace the diversity of frameworks and libraries. Instead of merging, focus on standardizing the principles behind frameworks. Consider tradeoffs and benefits when choosing a framework, and explore different technologies to learn new ideas.
Managing React State: 10 Years of Lessons Learned
React Day Berlin 2023React Day Berlin 2023
16 min
Managing React State: 10 Years of Lessons Learned
Top Content
Watch video: Managing React State: 10 Years of Lessons Learned
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Watch video: The Epic Stack
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Gateway to React: The React.dev Story
React Summit US 2023React Summit US 2023
32 min
Gateway to React: The React.dev Story
Watch video: Gateway to React: The React.dev Story
The Talk discusses the journey of improving React and React Native documentation, including the addition of interactive code sandboxes and visual content. The focus was on creating a more accessible and engaging learning experience for developers. The Talk also emphasizes the importance of building a human API through well-designed documentation. It provides tips for building effective documentation sites and highlights the benefits of contributing to open source projects. The potential impact of AI on React development is mentioned, with the recognition that human engineers are still essential.
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.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 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.
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 🤐)
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
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.
React at Scale with Nx
React Summit 2023React Summit 2023
145 min
React at Scale with Nx
Top Content
Featured WorkshopFree
Isaac Mann
Isaac Mann
We're going to be using Nx and some its plugins to accelerate the development of this app.
Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components
Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component
Rock Solid React and GraphQL Apps for People in a Hurry
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.
GraphQL for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
The Weird Things About React
React Day Berlin 2022React Day Berlin 2022
34 min
The Weird Things About React
Top Content
React has some weird and undocumented features like using the key attribute to remount components. The new beta docs and RFCs provide valuable insights into React's thinking and allow for proposing changes. React's composition story has evolved from mixins to higher order components to hooks. The upgrade to React 18 fixed TypeScript types but introduced issues with optional children. React warnings can be helpful but also annoying, and a library called React Reduce Stress can suppress them. React strict mode helps identify issues and supports new features, but it can cause double rendering in React 18. Overall, React is an interesting journey with its flaws and learning opportunities.
Emotional & Functional UI Animations in React
React Day Berlin 2022React Day Berlin 2022
28 min
Emotional & Functional UI Animations in React
Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.
Best Practices and Advanced TypeScript Tips for React Developers
React Advanced 2022React Advanced 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
TypeScript and React: Secrets of a Happy Marriage
React Advanced 2022React Advanced 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.
A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
A Career As Software Engineer
React Advanced 2022React Advanced 2022
24 min
A Career As Software Engineer
Code will be imperfect and perishable, so testing and debugging are crucial. Building relationships and being generous with code reviews are important for teams. Code ownership should belong to the team, not individuals. Prioritizing functionality over consistency can lead to more efficient development. Growing into a tech lead role requires building relationships and coaching skills.
Deep Diving on Concurrent React
React Advanced 2022React Advanced 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 2022React Advanced 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.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced 2022React Advanced 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
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
Top Content
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.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 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 2021React Advanced 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 2021React Advanced 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.
(Easier) Interactive Data Visualization in React
React Advanced 2021React Advanced 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Opensource Documentation—Tales from React and React Native
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
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.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Everything You Thought You Knew About React Functional Components Is Wrong
React Summit US 2024React Summit US 2024
22 min
Everything You Thought You Knew About React Functional Components Is Wrong
Thank you for coming to React Summit! I wanted to create clarity around React Hooks and provide tools for troubleshooting React issues. Functional components in React are different from class components in terms of their lifecycle. Understanding the creation and destruction of objects in JavaScript is crucial to comprehend the behavior of functional components. Creating functions and objects that are not used can lead to memory waste and system resource consumption. Storing references to variables can keep them in memory, so it's crucial to ensure there is a direct path from window to the variable. This talk discusses creating objects and storing them in React components using useState and useMemo. It emphasizes the importance of using useCallback in cases where a callback is going into a component with a large state tree to avoid unnecessary renders. The talk also explores different approaches to handling data retrieval and update in React components, highlighting the use of useRef as a solution to access and update data in server-side data sources. Overall, the talk provides insights and tools for troubleshooting issues in React functional components.
Let's Build Suspense 🥁
React Summit US 2024React Summit US 2024
20 min
Let's Build Suspense 🥁
Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
React Summit US 2024React Summit US 2024
12 min
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.
Tanstack Start - A Client-Side First Full-Stack React Framework
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - A Client-Side First Full-Stack React Framework
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.
If You Were a React Compiler
React Summit US 2024React Summit US 2024
26 min
If You Were a React Compiler
In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.
Sketching with Code: Integrating React and p5.js
React Summit US 2024React Summit US 2024
30 min
Sketching with Code: Integrating React and p5.js
Hello React Summit! Senior software engineer building educational experiences at NewZella. Passionate about helping people get involved with open source. Creative coding journey started on Neopets. Have a CodePen with examples in p5.js, svg.js, and CSS. Talk is about p5.js and React, building an application to generate a grid pattern. Incorporating user inputs into the creative process using p5.js and React. Art exhibit at the Wellcome Museum inspired by generative art. True shade tiles and the 10 print algorithm inspired the pattern in our example. p5.js is a JavaScript library for creative coding, accessible to different backgrounds. Order is important in p5.js. React is better at managing complex state. Use the p5.js React wrapper to simplify integration. Use p5.js in instance mode to avoid naming collisions. Instance mode is safer and helpful as the project grows. Use destructuring to get values from input. Lerp color function creates color gradients. Use random seed for consistent random numbers in animations. Struggling with making the Canvas mobile-friendly. Animating P5.js sketches without relying on CSS. Optimizing canvas elements. P5.js and WebGL for 3D rendering. Conclusion and appreciation.
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
React Advanced 2024React Advanced 2024
12 min
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
I'm Gil, a performance architect at Wix. Today, I'll explain how we use code splitting to improve website performance. Code splitting breaks down JavaScript into smaller chunks or React components, loading them only when needed. This reduces JavaScript size and improves user experience. We measure performance using Core Web Vitals, focusing on INP scores, which evaluate interactivity. Reducing JavaScript improves INP. Our INP scores have significantly improved, thanks to our code splitting techniques. Let's dive into the code splitting strategies we use, starting with dynamic import and React Lazy. Let's move on to a more advanced example: conditionally loading components on page load, not on user interactions. We fetch the comments data and render the comment section only if there are any comments. This method is supported in React 18 and works for server-side rendering (SSR). React components can be loaded dynamically on scroll or hover interactions with suspense. If the components are already rendered with SSR, we just need to download and hydrate them. This is only possible with the new suspense in server-side rendering (SSR). We use react-lazy with dynamic imports to render the component when it enters the viewport. I created a download on viewport wrapper that creates a ref and uses the intersection observer to resolve a promise when the component enters the viewport. I use the viewport and a wrapper that calls a function called use, which is implemented using the suspense API from React. This function is used to manage the promise and render the components only after it's resolved. The suspense component handles this promise. We moved props calculation to the server side and fetched them in the React component. This approach simplifies the process and can be implemented using the dynamic API in Next.js. By conditionally rendering components and calculating props on the server side, we can significantly reduce the amount of JavaScript code loaded in the client side, resulting in improved performance.
The Art of Ignoring Best Practices for React Performance
React Summit 2024React Summit 2024
19 min
The Art of Ignoring Best Practices for React Performance
This Talk introduces the concept of being a 'React bad boy' by ignoring best practices and optimizing React rendering. It explains how to avoid unnecessary rerenders using React.memo and React DevTools. It also covers advanced techniques like isolating state changes and lazy loading hooks. The Talk explores reducing component rerenders using Svelte stores and optimizing with swap stores in Redux. These techniques improve React performance without the need for major refactors or rewrites.
React in the Autonomous Robotics Industry
React Summit 2024React Summit 2024
11 min
React in the Autonomous Robotics Industry
Hamza Hawi, a software engineer at the Autonomous Robotics Research Center, discusses the use of React and Leaflet in robotics. The research center utilizes a mixed fleet of robots and relies on React for mission planning software, while Leaflet is used for mapping and custom layers. Leaflet offers flexibility for different types of vehicles and supports the creation of custom layers like image and video overlays. Additionally, the talk mentions the use of video overlays for weather forecasts and optimizing joystick usage with a strategy design pattern.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React Summit 2024React Summit 2024
22 min
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.
Building End-to-End Encrypted Apps (Web & React Native)
React Summit 2024React Summit 2024
32 min
Building End-to-End Encrypted Apps (Web & React Native)
This Talk explores the concept and advantages of end-to-end encryption in software development. It discusses the challenges of data encryption and conflict resolution in collaborative apps. The integration of end-to-end encryption with conflict-free replicated data types (CRDTs) is highlighted. The talk also covers simplified document sync, real-time sync and encryption, key management, and authentication. Additionally, it mentions the importance of local-first integration, CRDT frameworks, and data search indices.
The Suspense Quest - Inside React's Magic
React Summit 2024React Summit 2024
30 min
The Suspense Quest - Inside React's Magic
This Talk explores the suspense component in React and its benefits in handling fetched data. It delves into the rendering process of React components and how suspense anticipates requests. The offscreen fiber is introduced as a hidden component that ensures state continuity. The Talk also discusses the usage of suspense for handling concurrent queries and throwing promises, as well as the integration of Redux and the upcoming changes in React 19. Overall, the Talk provides insights into the workings of suspense and its potential applications in software development.
Next.js for React.js Developers
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js for React.js Developers
Top Content
Workshop
Adrian Hajdin
Adrian Hajdin
In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions.
By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.
Let's build a TV Spatial Navigation
React Day Berlin 2023React Day Berlin 2023
34 min
Let's build a TV Spatial Navigation
Watch video: Let's build a TV Spatial Navigation
Today's Talk is about building a spatial navigation library for Smart TVs. The speaker shares their experience and challenges in building applications for Smart TVs. They demonstrate the functionality of spatial navigation using React and React Router. The navigation engine class is developed to handle TV control events and navigate through elements. Circular navigation is implemented to make navigation easier for users in TV applications.
Virtual DOM: Back in Block
React Day Berlin 2023React Day Berlin 2023
9 min
Virtual DOM: Back in Block
Watch video: Virtual DOM: Back in Block
Hi, my name is Anand Bai. I'll be talking about virtual DOM and its performance. Rich Harris argued that the virtual DOM is not as efficient as many believe, leading to the emergence of the meme that it's pure overhead. Today, I'm going to introduce something new, a new approach to doing the virtual DOM. MillionJS, a drop-in replacement for React, is significantly faster than Preact and React on benchmarks. The block virtual DOM, introduced by Block DOM, is a potential solution to existing virtual DOM libraries like React.
Hacking an e-Reader to Show My Tea Menu With JSX
React Day Berlin 2023React Day Berlin 2023
7 min
Hacking an e-Reader to Show My Tea Menu With JSX
Watch video: Hacking an e-Reader to Show My Tea Menu With JSX
React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
React Summit US 2023React Summit US 2023
160 min
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
Top Content
WorkshopFree
Amy Dutton
Amy Dutton
This workshop will guide you through the product development life cycle of creating a real-world web application. You will learn about React Server Components, building a design system within Storybook, and using frontend development to approach becoming a full-stack developer. The workshop will cover increasing confidence in your application with unit tests and implementing authentication and authorization. You'll have the opportunity to work through product features and examine a real-world RedwoodJS project, gaining valuable experience in real-world product development. RedwoodJS makes it simple to approach full-stack development, and this workshop will give you the skills you need to create your own real-world web applications.
Wait, You're Shipping React Native to the Web?!
React Summit US 2023React Summit US 2023
32 min
Wait, You're Shipping React Native to the Web?!
Watch video: Wait, You're Shipping React Native to the Web?!
Guild is a platform that needs to exist on all platforms, using React Native to orchestrate them. React Native and Expo provide components that work across platforms. Building applications with React Native involves composing components and using a design system. Choosing the right server-side rendering solution is important for unifying mobile and web codebases. Embedding React Native allows for optimization and embedding in any application. Bridging the gap between UI and API with embeddable experiences is key to supporting communities on every platform.
React State Management with Valtio
React Summit US 2023React Summit US 2023
10 min
React State Management with Valtio
Watch video: React State Management with Valtio
This is a short presentation on VALTEO, a proxy-based state management system that uses JavaScript's native idea of proxies to create observable and immutable state. The proxy tracks changes to the object and nested proxy objects, only re-rendering the component when a specific key changes. There is a gotcha with proxies in Valtio - avoid reassigning the proxy to a whole new object. Valtio integrates with Redux DevTools, making it even more powerful and convenient.
React Server Components from Scratch
React Summit US 2023React Summit US 2023
29 min
React Server Components from Scratch
Watch video: React Server Components from Scratch
This Talk introduces React Server Components and provides a step-by-step guide on building and rendering them. It explores the capabilities of server components, including interactivity and streaming. The Talk also covers the process of incorporating client-side rendering and the challenges of bundling and mapping client components. Additionally, it discusses the importance of supporting React Server Components and the ongoing efforts to integrate them with different bundlers.
From Todo App to B2B SaaS with Next.js and Clerk
React Summit US 2023React Summit US 2023
153 min
From Todo App to B2B SaaS with Next.js and Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?
Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.
In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Hacking an e-Reader with React
React Advanced 2023React Advanced 2023
7 min
Hacking an e-Reader with React
Watch video: Hacking an e-Reader with React
React for eBooks? Learn how to hack an eReader to display a tea menu. Create images and write e-books using React. Use EPUB format to create chapters and include CSS. Use Pandoc and Dino to simplify the process and make quick updates.
How to NOT use useEffect?
React Advanced 2023React Advanced 2023
24 min
How to NOT use useEffect?
Top Content
Watch video: How to NOT use useEffect?
Welcome to how not to use UseEffect. UseEffect is a hook introduced in React 16.8 as a replacement for component dismount and update in class components. It runs your callback once when the component mounts and when there are changes in dependencies. UseEffect allows performing side effects such as fetching data. UseEffect executes its callback asynchronously to allow the browser to render and show something to the user without blocking the main thread. Setting a state in a useEffect without a dependency array can cause nasty loops. Sometimes you are using use effects to take care of calling parent events. Nasty Fetch. Sometimes, when fetching articles, loading and race conditions need to be considered.
Concurrent React Made Easy
React Advanced 2023React Advanced 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.
Zod === TypeScript, but at Runtime in Your React Applications
React Advanced 2023React Advanced 2023
20 min
Zod === TypeScript, but at Runtime in Your React Applications
Watch video: Zod === TypeScript, but at Runtime in Your React Applications
Zotter is a powerful tool for working with TypeScript in React applications, providing a simple schema concept for validation. It allows you to convert Zod schemas into TypeScript types and check if objects match the schema. Zod can be used for validation and contract enforcement, ensuring data consistency and preventing issues. It can also be used in React applications to create a validation layer and prevent code from running with incorrect data. The speaker encourages questions and provides contact information for further discussion.
Why Everybody Needs a Framework
React Advanced 2023React Advanced 2023
39 min
Why Everybody Needs a Framework
Watch video: Why Everybody Needs a Framework
Today's Talk explores the value of using frameworks in software development, specifically focusing on React and its impact on web development. The Talk delves into the benefits of frameworks, such as solving routing and data fetching challenges, handling edge cases, and providing server-side rendering. It also introduces the concept of server components and their role in server-side rendering. The Talk highlights the advantages of soft navigation and the seamless communication between client and server. Overall, frameworks offer valuable functionality that enhances productivity and addresses common development challenges.
Hydration, Islands, Streaming, Resumability… Oh My!
React Advanced 2023React Advanced 2023
26 min
Hydration, Islands, Streaming, Resumability… Oh My!
Watch video: Hydration, Islands, Streaming, Resumability… Oh My!
Today's Talk introduces the concepts of hydration and off islands, explores the benefits of islands for enhancing server-side rendered HTML with client-side JavaScript, discusses the lazy approach of re-zoomability and its advantages over traditional hydration, highlights the use of resumability and concurrent React for improved rendering performance, examines the features and concerns of React server components, touches on the co-location of client and server code, and explores future trends in rendering and navigation. The Talk also reflects on past ideas and emphasizes the importance of identifying core metrics for performance optimization.
The State of The State In The App Router
React Advanced 2023React Advanced 2023
32 min
The State of The State In The App Router
Watch video: The State of The State In The App Router
React has improved state management with built-in hooks like useState, useReducer, and useRef. Redux can still be used but it's recommended to avoid global state. Zustand is an alternative state manager that allows for easy creation of hooks. Proper architecture is important for accessing the global store. State managers can add extra bytes to the client's JavaScript bundle, so it's important to be selective in choosing libraries. Next.js and React routers are recommended for server-side rendering and personalized experiences can be achieved with spas.
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.
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
React Advanced 2023React Advanced 2023
29 min
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
Top Content
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.
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
Game Development with ReactJS, CSS, and React Three Fiber
JS GameDev Summit 2023JS GameDev Summit 2023
22 min
Game Development with ReactJS, CSS, and React Three Fiber
Jorge Rubiano, a Software Engineer from Colombia, shares puzzle, isometric, and board games developed using React.js and CSS. He demonstrates the use of WebGL and 3.js for creating 3D games on the web. ReactiveFiber, a renderer that combines React and 3.js, is showcased in movement-based and color-changing games. The Talk concludes with the development of a bowling game using ReactiveFiber and complex components.
7 TypeScript Patterns You Should Be Using
React Summit 2023React Summit 2023
19 min
7 TypeScript Patterns You Should Be Using
Top Content
Watch video: 7 TypeScript Patterns You Should Be Using
This Talk introduces 7 essential TypeScript patterns for React development, including children, spreading props, either-or, generic components, and context. The speaker demonstrates various implementations and provides examples using a fictional dog grooming salon application. Other interesting ideas include using omit and make required types, creating components with either-or interfaces, and using generics, memorization, and context in React. The speaker also introduces the Recontextual library for context management.
Bringing Controversial Ideas to React
React Summit 2023React Summit 2023
8 min
Bringing Controversial Ideas to React
Watch video: Bringing Controversial Ideas to React
This Talk discusses bringing controversial ideas to React, building a plugin architecture, and using Redux without the Connect method. It explores the implementation of plugins that inject functionality into the UI and the use of MobxStateTree. The Talk also highlights the challenges of connecting everything to Redux and the benefits of implementing custom re-renders for better performance. It emphasizes the importance of exploring new territories and embracing controversial ideas for new perspectives.
useMachineLearning… and Have Fun with It!
React Summit 2023React Summit 2023
9 min
useMachineLearning… and Have Fun with It!
Watch video: useMachineLearning… and Have Fun with It!
Nico, a freelance frontend developer and part of the Google Developer Experts program, provides an introduction to machine learning in the browser. He explains how machine learning differs from traditional algorithms and highlights the use of TensorFlow.js for implementing machine learning in the browser. The talk also covers the use of different backends, such as WebGL, and the conversion of audio into spectrograms for model comparison. Nico mentions the use of overlay for improved detection accuracy and the availability of speech command detection and custom model training with TensorFlow. Overall, the talk emphasizes the benefits of using and training machine learning models directly on the device.
Thinking in React Query
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
Watch video: Thinking in React Query
React Query is not a data fetching library, but an Asian state manager. It helps keep data up to date and manage agent life cycles efficiently. React Query provides fine-grained subscriptions and allows for adjusting stale time to control data fetching behavior. Defining stale time and managing dependencies are important aspects of working with React Query. Using the URL as a state manager and Zustand for managing filters in React Query can be powerful.
Giving Superpowers to Your React Apps with Machine Learning
React Summit 2023React Summit 2023
11 min
Giving Superpowers to Your React Apps with Machine Learning
Watch video: Giving Superpowers to Your React Apps with Machine Learning
Welcome to my lightning talk at React Summit 2023 where I discuss integrating machine learning capabilities in React apps using JavaScript libraries like TensorFlow.js and ONNX.js. These libraries allow for better privacy, lower cost, and lower latency by leveraging system hardware. Examples include using TensorFlow.js and CocoaSSIST to classify images and Ermine.ai for live audio transcription. React developers can now integrate machine learning without needing extensive knowledge of Python or other frameworks.
Overcoming Performance Limitations in React Components for Low-end Devices
React Summit 2023React Summit 2023
9 min
Overcoming Performance Limitations in React Components for Low-end Devices
Watch video: Overcoming Performance Limitations in React Components for Low-end Devices
This Talk discusses overcoming performance limitations in React components for low-end devices, focusing on app launch time and scrolling performance. The speaker shares techniques for improving app launch and scrolling performance, such as pre-rendering, generating HTML at build time, and using the Virtual List component. The Virtual List component recycles dominoes and uses Translate3D function for improved performance. Delegating scrolling to the browser in NativeMode and supporting scrolling via remote control keys are also mentioned. Overall, the Talk highlights the importance of optimizing performance for low-end devices and provides practical solutions for achieving better performance in React components.
No CRA? What now?
React Summit 2023React Summit 2023
7 min
No CRA? What now?
Watch video: No CRA? What now?
React docs suggest using production-grade frameworks like Remix, Next.js, or Gatsby. But if you want to start with a simple pure React app, you can use Vite or Parcel as generic bundlers. Nx provides facilities to set up a workspace similar to Create React app with modern features. You can modularize and scale your project using Nx libraries. Consider upgrading to a Monorepo structure and adding Next.js or Remix applications. Migration strategies are available for existing React apps.
Supercharging React Apps with WASM
React Summit 2023React Summit 2023
25 min
Supercharging React Apps with WASM
Watch video: Supercharging React Apps with WASM
WebAssembly is a fast, secure, and portable technology that challenges JavaScript's dominance on the web. It allows for the use of legacy code and expands the scope of functions that can be performed on various devices. WebAssembly can be used for image processing and machine learning, and it has potential applications in UI component libraries. Startups are already incorporating WebAssembly into their web applications, and optimization and performance are key advantages of this technology.
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.
You Can’t Use Hooks Conditionally… or Can You?
React Summit 2023React Summit 2023
28 min
You Can’t Use Hooks Conditionally… or Can You?
Top Content
Watch video: You Can’t Use Hooks Conditionally… or Can You?
The Talk discusses the use of the Use hook in React and its ability to be used conditionally. It explains the concept of the fiber tree and how hooks values are stored in memory. The Talk also delves into the conditional use of useContext and how it differs from useState. It explores the process of updating context values and optimizing context rendering. The role of the provider in managing context values and rendering is emphasized.
From Idea to Production: React Development with a Visual Twist
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Omer Kenet
Omer Kenet
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A
0 to Auth in an hour with ReactJS
React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.
Server Components with Bun
Node Congress 2023Node Congress 2023
7 min
Server Components with Bun
Top Content
Bun is a modern JavaScript runtime environment that combines a bundler, transpiler, package manager, and runtime. It offers faster installation of NPM packages and execution of package.json scripts. Bun introduces a new JavaScript and TypeScript bundler with built-in support for server components, enabling easy RPC with the client. This allows for code splitting and running code that streamingly renders React or any other library from the server and mixes it with client code, resulting in less JavaScript sent to the client.
What the Heck Do "Declarative" and "Reactive" Actually Mean?
React Day Berlin 2022React Day Berlin 2022
69 min
What the Heck Do "Declarative" and "Reactive" Actually Mean?
Workshop
Andre Kovac
Andre Kovac
You’ve built apps with frontend frameworks before? - Then you surely came across the terms ""declarative"" and “reactive”. Since React got released in 2013, most modern UI frameworks or libraries want to be it, but what do these terms actually mean? And what’s the difference between “declarative” and “imperative” code?
It took me a long time to grasp these concepts - but when I finally did, I saw frontend frameworks in a totally new light! And I hope you will feel the same after this talk.
In this very interactive workshop, we’ll delve into a lot of code examples to deeply understand the terms - with examples using vanilla JavaScript, React and Svelte. But the learnings will be universal. After this talk you’ll be able to confidently join discussions about the ""declarative"" and ""reactive"" nature of any new package or library.
Designing Effective Tests with React Testing Library
React Day Berlin 2022React Day Berlin 2022
131 min
Designing Effective Tests with React Testing Library
Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Prerequisites:- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Building for Web & Mobile with Expo
React Day Berlin 2022React Day Berlin 2022
155 min
Building for Web & Mobile with Expo
Workshop
Josh Justice
Josh Justice
We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.
In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!
What's included1. Setting up drawer and stack navigators with React Navigation, including responsiveness2. Configuring React Navigation with URLs3. Setting up React Native Paper including styling the React Navigation drawer and headers4. Setting up a custom color theme that supports dark mode5. Configuring favicons/app icons and metadata6. What to do when you can’t or don’t want to provide the same functionality on web and mobile
Prerequisites- Familiarity with building applications with either React or React Native. You do not need to know both.- Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/
Using MediaPipe to Create Cross Platform Machine Learning Applications with React
React Day Berlin 2022React Day Berlin 2022
20 min
Using MediaPipe to Create Cross Platform Machine Learning Applications with React
Welcome to a talk on using MediaPipe for cross-platform machine learning applications with ReactJS. MediaPipe provides ready-to-use solutions for object detection, tracking, face mesh, and more. It allows for video transformation and tensor conversion, enabling the interpretation of video footage in a human-readable form. MediaPipe utilizes graphs and calculators to handle the perception pipeline. Learn how to use MediaPipe packages in React and explore a demo showcasing the hands model for detecting landmarks. Custom logic can be written to detect open and closed landmarks, making it useful for applications like American Sign Language.
Writing Chrome Extensions in React
React Day Berlin 2022React Day Berlin 2022
7 min
Writing Chrome Extensions in React
Today's Talk is about making Chrome extensions in React. The speaker demonstrates a boilerplate project and shows how easy it is to get started. The Talk also explores the components of a Chrome extension and how changes trigger a hot reload.
Generic Components with TS and React
React Day Berlin 2022React Day Berlin 2022
10 min
Generic Components with TS and React
Ilya, a Staff Engineer in ArtSecurity, gives a talk on using generic components with React and TypeScript. He demonstrates how to pass generics to React components and addresses syntax limitations. Generics allow components to operate on data without a defined shape and are commonly used in form field components and component libraries.
Digital Ecology: How Can You Mitigate the Carbon Footprint of Websites?
React Day Berlin 2022React Day Berlin 2022
7 min
Digital Ecology: How Can You Mitigate the Carbon Footprint of Websites?
Today's Talk discusses digital ecology and reducing the carbon footprint of websites. Techniques such as using JavaScript or TypeScript, lighter libraries, and optimizing resources can reduce the carbon footprint by 70%. User data collection is important for sustainability, and the Ecolint tool helps make websites more sustainable. It's an open-source tool that can be downloaded and customized.
Wait, React Is Multi-Threaded?
React Day Berlin 2022React Day Berlin 2022
22 min
Wait, React Is Multi-Threaded?
Top Content
This Talk explores the use of web workers in React to improve user experience and performance. It discusses the limitations of JavaScript rendering and how web workers can offload tasks to separate threads. The Talk also highlights the benefits of using concurrent mode in React and introduces the UseWebWorkerHook library for simplifying the creation of web workers. It emphasizes the considerations when using web workers and concludes with a mention of Postman's hiring and new feature release.
Statically Detecting React App Bugs with TypeScript and ESLint
React Day Berlin 2022React Day Berlin 2022
21 min
Statically Detecting React App Bugs with TypeScript and ESLint
This Talk explores static analysis tooling for JavaScript and TypeScript, focusing on detecting bugs with TypeScript and ESLint. The importance of type checking and extending recommended rules is emphasized. The Talk also delves into specific ESLint rules and provides code samples to demonstrate their usage. The insights provided by ESLint powered by TypeScript are highlighted. Floating promises and misused promises are discussed, along with recommendations for handling exceptions and resources. The Talk concludes by offering resources and support for further exploration and development.
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.