#react
SubscribeWe'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.
Future of Frontend Frameworks Fireside Chat
React Summit 2024
28 min
Future of Frontend Frameworks Fireside Chat
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 LearnedWatch video: Managing React State: 10 Years of Lessons Learned
React Day Berlin 2023
16 min
Managing React State: 10 Years of Lessons Learned
Top ContentThis 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 StackWatch video: The Epic Stack
React Summit US 2023
21 min
The Epic Stack
Top ContentThis 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 StoryWatch video: Gateway to React: The React.dev Story
React Summit US 2023
32 min
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 WoesWatch video: Power Fixing React Performance Woes
React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top ContentThis 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)Watch video: React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content2 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 ComponentsWatch video: A Practical Guide for Migrating to Server Components
React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Top ContentReact query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Server Components: The Epic Tale of Rendering UXWatch video: Server Components: The Epic Tale of Rendering UX
React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Top ContentThis 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, ExplainedWatch video: React Concurrency, Explained
React Summit 2023
23 min
React Concurrency, Explained
Top ContentReact 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.
Rock Solid React and GraphQL Apps for People in a Hurry
GraphQL 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.
The Weird Things About React
React Day Berlin 2022
34 min
The Weird Things About React
Top ContentReact 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 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.
TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top ContentReact 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 Conference 2022
25 min
A Guide to React Rendering Behavior
Top ContentThis 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 Conference 2022
30 min
Using useEffect Effectively
Top ContentToday'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 Conference 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 Conference 2022
29 min
Deep Diving on Concurrent React
The Talk discussed Concurrent React and its impact on app performance, particularly in relation to long tasks on the main thread. It explored parallelism with workers and the challenges of WebAssembly for UI tasks. The concepts of concurrency, scheduling, and rendering were covered, along with techniques for optimizing performance and tackling wasted renders. The Talk also highlighted the benefits of hydration improvements and the new profiler in Concurrent React, and mentioned future enhancements such as React fetch and native scheduling primitives. The importance of understanding React internals and correlating performance metrics with business metrics was emphasized.
Understanding React’s Fiber Architecture
React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top ContentThis Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Inside Fiber: the in-depth overview you wanted a TLDR for
React Summit 2022
27 min
Inside Fiber: the in-depth overview you wanted a TLDR for
This Talk explores the internals of React Fiber and its implications. It covers topics such as fibres and units of work, inspecting elements and parent matching, pattern matching and coroutines, and the influence of coroutines on concurrent React. The Talk also discusses effect handlers in React, handling side effects in components, and the history of effect handlers in React. It concludes by emphasizing the importance of understanding React internals and provides learning resources for further exploration.
Routing in React 18 and Beyond
React Summit 2022
20 min
Routing in React 18 and Beyond
Top ContentRouting 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.
Cracking the Concurrent Mode
React Advanced Conference 2021
30 min
Cracking the Concurrent Mode
Sudhanshu Yadav discusses the incremental concurrent feature in React 18 and the need for concurrent mode to provide a better user experience. Time slicing is the key pattern enabling concurrent features. Background rendering and unit of work are used to achieve asynchronous rendering and eventual consistency. Concurrent mode introduces a new pattern called differing for immediate rendering and adjusting based on available resources. React provides APIs for deferred updates and transitions. Implementing concurrent mode APIs can be complex, but it offers benefits like avoiding update starvation and reusing work. Scheduling and slots are used to control execution and dynamic FPS control. Handling multiple transitions can be challenging, but the React 18 working group discussions provide insights into the team's efforts to improve the user experience.
Living on the Edge
React Advanced Conference 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 Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top ContentThis 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.
Opensource Documentation—Tales from React and React Native
React 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
Building Better Websites with Remix
React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top ContentRemix 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.
The Art of Ignoring Best Practices for React Performance
React 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 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 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 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 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.
Let's build a TV Spatial NavigationWatch video: Let's build a TV Spatial Navigation
React Day Berlin 2023
34 min
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 BlockWatch video: Virtual DOM: Back in Block
React Day Berlin 2023
9 min
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 JSXWatch video: Hacking an e-Reader to Show My Tea Menu With JSX
React Day Berlin 2023
7 min
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.
Wait, You're Shipping React Native to the Web?!Watch video: Wait, You're Shipping React Native to the Web?!
React Summit US 2023
32 min
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 Watch video: React State Management with Valtio
React Summit US 2023
10 min
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 ScratchWatch video: React Server Components from Scratch
React Summit US 2023
29 min
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.
Hacking an e-Reader with ReactWatch video: Hacking an e-Reader with React
React Advanced Conference 2023
7 min
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?Watch video: How to NOT use useEffect?
React Advanced Conference 2023
24 min
How to NOT use useEffect?
Top ContentWelcome 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 EasyWatch video: Concurrent React Made Easy
React Advanced Conference 2023
23 min
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 ApplicationsWatch video: Zod === TypeScript, but at Runtime in Your React Applications
React Advanced Conference 2023
20 min
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 FrameworkWatch video: Why Everybody Needs a Framework
React Advanced Conference 2023
39 min
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!Watch video: Hydration, Islands, Streaming, Resumability… Oh My!
React Advanced Conference 2023
26 min
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 RouterWatch video: The State of The State In The App Router
React Advanced Conference 2023
32 min
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 PerformanceWatch video: Patterns for Performance
React Advanced Conference 2023
28 min
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 ExperiencesWatch video: How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
React Advanced Conference 2023
29 min
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
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.
Game Development with ReactJS, CSS, and React Three Fiber
JS 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 UsingWatch video: 7 TypeScript Patterns You Should Be Using
React Summit 2023
19 min
7 TypeScript Patterns You Should Be Using
Top ContentThis 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 ReactWatch video: Bringing Controversial Ideas to React
React Summit 2023
8 min
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!Watch video: useMachineLearning… and Have Fun with It!
React Summit 2023
9 min
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 QueryWatch video: Thinking in React Query
React Summit 2023
22 min
Thinking in React Query
Top ContentReact 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 LearningWatch video: Giving Superpowers to Your React Apps with Machine Learning
React Summit 2023
11 min
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 DevicesWatch video: Overcoming Performance Limitations in React Components for Low-end Devices
React Summit 2023
9 min
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?Watch video: No CRA? What now?
React Summit 2023
7 min
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 WASMWatch video: Supercharging React Apps with WASM
React Summit 2023
25 min
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?Watch video: Should You Use React in 2023?
React Summit 2023
31 min
Should You Use React in 2023?
Top Content2 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?Watch video: You Can’t Use Hooks Conditionally… or Can You?
React Summit 2023
28 min
You Can’t Use Hooks Conditionally… or Can You?
Top ContentThe 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.
Server Components with Bun
Node Congress 2023
7 min
Server Components with Bun
Top ContentBun 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.
Using MediaPipe to Create Cross Platform Machine Learning Applications with React
React 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.
Generic Components with TS and React
React 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.
Writing Chrome Extensions in React
React 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.
Digital Ecology: How Can You Mitigate the Carbon Footprint of Websites?
React 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 2022
22 min
Wait, React Is Multi-Threaded?
Top ContentThis 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 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 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.
The State of React Tooling
React Day Berlin 2022
29 min
The State of React Tooling
The Talk discusses over 20 JavaScript tools commonly used by developers, including transpilers and bundlers. It highlights the pros and cons of various tools such as Sucrase, Babel, SWC, and ESBuild. The importance of TypeScript, linters like eslint, and the emergence of new tools like Rome are also mentioned. The Talk delves into the future of JavaScript, the challenges of bundling UI libraries, and the corporate era of JavaScript libraries with the backing of companies.
Less Struggle With Lifetimes
React Day Berlin 2022
6 min
Less Struggle With Lifetimes
The Talk introduces the concept of Lifetime in software development, which is used to handle clean-ups. By using a simple object called Lifetime, engineers can bind clean-up functions and reuse them throughout their applications. Lifetimes can be nested, allowing for the creation of chains and trees to manage dependencies. The Talk also mentions the ability to create different types of lifetimes, such as sequential lifetimes, which can be useful for canceling requests or cleaning up effects from previous iterations.
How I Automated Code Changes for 100 Repositories: Getting Started With Codemods
React Day Berlin 2022
28 min
How I Automated Code Changes for 100 Repositories: Getting Started With Codemods
This Talk discusses automating code changes for Android repositories, utilizing tools like JSCodeShift and Abstract Syntax Tree. The speaker shares a real use case example of maintaining a design system library and making changes to a component. The talk emphasizes the importance of automating repetitive tasks and using the power of abstract syntax tree for code changes. The Q&A session covers topics like source code formatting, TypeScript support, and cultural embedding of code mods. The talk concludes with insights on when automation is worth it and the limitations of code mods for monorepo changes.
Nextra 2.0: Create a Full-Featured Documentation Site in 5 Minutes
React Day Berlin 2022
28 min
Nextra 2.0: Create a Full-Featured Documentation Site in 5 Minutes
Top ContentNext.js and Nextra are powerful tools for generating full-featured documentation websites with ease. Nextra offers features like dark mode, full-text search, and React code integration. Next.js provides image optimization, SSG, SSR, and other powerful features. Nextra is highly customizable and supports localization, collaboration, and API integration. The future vision includes combining documentation and live views, adding social card generation and advanced search functionality.
3+ Uses of React at a Game Studio
React Day Berlin 2022
29 min
3+ Uses of React at a Game Studio
Game development challenges and solutions include saving games in the cloud, customer support tools, and remote changes to player progress. Custom editors in game development can be generated based on a database schema. The use of web technologies in game development can lead to faster and better games. The speaker discusses the tech stack used in game development, including TypeScript, React, and React Native. The talk concludes with advice for web developers transitioning to game development.
Remixing Your Stack in a Monorepo Workspace
Remix Conf Europe 2022
22 min
Remixing Your Stack in a Monorepo Workspace
Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.
Making a Splash: The Story of a Toilet Map Migration
React Advanced Conference 2022
24 min
Making a Splash: The Story of a Toilet Map Migration
The Talk discusses the migration of the Toilet Map Project from Create React app to Next.js, with plans to take it international. The project aims to address the inadequate public toilet provision in the UK. It includes publicly accessible toilets, community access schemes, and user contributions. The migration to Next.js offers benefits like server-side rendering and root prefetching. The Talk also covers the migration to TypeScript, improvements in loading speed and caching, dynamic pages, API migration, geohashing, marker clustering, chunk loading, accessibility overlay, and future plans for expansion and user contributions.
Lessons Learnt While Creating a New Framework on Top of React
React Advanced Conference 2022
20 min
Lessons Learnt While Creating a New Framework on Top of React
React is a versatile tool that goes beyond front-end development and can be used for synthesizing music. Creating a specialized framework with React requires understanding the tooling ecosystem and React's design philosophy. Examining good codebases like createreactapp can accelerate development. Handling side effects and module replacement can be achieved through techniques like dead code elimination and hot module replacement. Maintaining component state and implementing hot module replacement are important considerations for a React application.