React Summit Remote Edition

React Summit Remote Edition 2021

This workshop on React Hooks Tips explores hooks beyond the basics, covering common mistakes, advanced hooks, creating custom hooks, and the rules of hooks. It demonstrates the use of useState, useEffect, and useContext hooks, as well as creating custom hooks for managing state and performing side effects. The workshop also covers the use of useRef, useReducer, and useLayoutEffect hooks, and provides insights into how React hooks work under the hood. It concludes with the implementation of a provider component and the use of context and reducers to manage complex state in functional components.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Hooks Tips Only the Pros Know

Maurice de Beijer

React Summit

React Summit 2024

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.

Have you ever wanted to break the rules and be a React troublemaker? I’ll show you how ignoring React’s best practices can improve performance, all without major rewrites to your codebase. To understand how, we’ll learn when React decides to render and how to trick it to render less frequently. We’ll build components that don’t render anything, conditionally call hooks, and even use a piece of Svelte - all to quickly fix real performance problems I encountered at Microsoft.

The Art of Ignoring Best Practices for React Performance

Tiger Oakes

React Summit 2023

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.

It’s the hooks rule number one: “Only call hooks at the top level”.But what if I told you that this rule does not apply to every hook? One of them can actually safely be used conditionally. To understand how useContext is different from other hooks, and why it is exempted from this major rule, we need to know why this rule exists in the first place. We will build our own mental model of react’s rendering behavior, focused on how react keeps track of data at runtime: props, states, refs… and context values.

You Can’t Use Hooks Conditionally… or Can You?

Charlotte Isambert

React Summit 2020

Capacitor is a powerful tool built by Ionic that allows web applications to be compiled into native iOS and Android projects. It comes with a set of plugins, including the camera plugin, and has a React hooks package for seamless integration with React applications. The Talk includes a demo showcasing the camera hook button and the rendering of selected photos. The presenter emphasizes the use of useEffect and useState for additional functionality. The Talk concludes with a mention of the Capacitor community and gratitude for attending.

Using Capacitor, you can easily create native mobile iOS and Android applications using all of the React web tools you know and love. But how do we access the native APIs? With the @capacitor-community/react-hooks package, we can quickly and easily access native device APIs, like Camera, Filesystem, and Geolocation, using React Hooks!

Using React Hooks + Capacitor to Access Native Mobile APIs

Thomas Vidas

React Summit 2022

The Talk covers topics such as React memo compiler, use memo and use callback, building custom hooks, and the benefits of using use ref. It also explores the similarities between use memo and use ref, and the use of React Memo for preventing re-renders and optimizing expensive calculations. The speaker also shares personal information and contact details.

React developers intrigue us with the so-called React Forget compiler [that’s supposed to inject useMemo and useCallback into code automatically]. However, we still can't figure out best practices for useCallback, useMemo, and React.memo when we write it on our own. The worst scenario is if we continue to put it everywhere without understanding. As a result, it can bring noticeable harm to the performance of our application. In this talk, on real-life use cases, you will see solutions to the problem of using hooks wrong or overusing them!

Don't Forget React Memo

Khrystyna Landvytovych

React Advanced

React Advanced 2021

This Talk introduces hook state as a flexible and simple state management solution for React. It demonstrates how hook state can be used for global state management, as well as for managing state within individual components. The speaker highlights the ease of using hook state for tasks such as adding, updating, and removing tasks. The conclusion encourages further exploration of hook state for efficient state management in React applications.

If you’ve worked with the React useState hook before, you might have wondered why global state management can’t be just as easy. Why do we still need so much boilerplate to manage state with the Context API? What if we don’t want to be constrained opinionated tools like Redux Toolkit or forced to use actions and reducers in our React applications? This is where Hookstate comes in. Hookstate is not just another state management solution. Apart from being feature-rich, fast, and flexible, the library takes the idea of simplifying state management in React apps to a whole new level. In this talk, I’ll introduce Hookstate as a simple and efficient state management solution for React applications. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Efficient State Management With Hookstate

Ebenezer Don

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

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

We Don’t Know How React State Hooks Work

Adam Klein

React Finland

React Finland 2021

The discussion explores the separation of concerns between logic (Model) and UI (View) and how React hooks are a great abstraction model that help achieve that. We'll start with designing a component's API (in a top down approach), then dive deeper to explore how to implement this API, while maintaining a good separation of concerns. We'll create custom React hooks to implement the Model and React components for the UI. Both expose self-documenting APIs and are completely decoupled from each other. To demo this approach, we'll create a simple Toggler component (a UI component that allows going back and forth in an array of values).Towards the end, we'll explore the benefits, focusing on testing these decoupled units in isolation. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Hooks are a great abstraction model

Calin Tamas

The Talk at React Summit explores the use of useEffect in React and its psychological effects. It delves into the concept of component life cycles and the flexibility of useEffect. The Talk also discusses the use of refs for mounting and unmounting components, as well as the cleanup effects of the return function. It highlights the importance of understanding when and how useEffect runs, and provides examples of using useEffect in different scenarios.

We have been using hooks for a while and with that we have also been using useEffect in particular and in this today I wanna take a look at the trickier parts of useEffect and why they work that way so you can leave with a super understanding of how this magic all works. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Psycological Effects of useEffect

Sara Vieira

Today's workshop focuses on state management in React using the Context API and Hooks. The Context API is now a viable option for state management and provides additional features for effective state management. Custom hooks can be created to handle local state and access values from the context. Combining multiple contexts and using the useMemo hook can prevent unnecessary component rerenders. The useReducer hook allows for more complex state logic, similar to Redux. Debugging can be done by creating custom hooks and logging actions. Context can be used for global state management by separating providers into different components. The workshop includes exercises to practice using context and breakout rooms for discussion. The Q&A session covers fetching data and managing errors with context.

A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

State Management in React with Context and Hooks

Roy Derks

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

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

#react hooks