AG Grid is a powerful JavaScript library that provides a robust grid component for both displaying and manipulating data in web applications. One of the key strengths of AG Grid lies in its high performance, which is achieved through techniques like virtualization of columns and rows. This ensures smooth scrolling and interaction, even with large datasets. This performance makes it a prime choice for developers looking to enhance their web applications with advanced data manipulation capabilities.
Another significant advantage of AG Grid is its extensibility. While it comes with a comprehensive set of features out of the box, it also allows for extensive customization. Developers can create custom components for cell rendering, editing, and filtering, making it adaptable to a wide range of use cases. The ergonomic API further simplifies the process of integrating AG Grid into applications.
Setting Up AG Grid in a React Application
Getting started with AG Grid in a React application is straightforward. To install AG Grid, you need to add two packages: ag-grid-community and ag-grid-react. These can be installed using npm and added to your package.json file. Once installed, you also need to set up the necessary CSS for styling, which involves importing base and theme CSS files from the ag-grid-community package.
After the initial setup, defining how your data is displayed is crucial. AG Grid requires you to define columns, including their sorting and filtering behaviors. This is done through column definitions, which determine how data is presented in the grid. The simplest form of a column definition specifies the header name and the field from which data is fetched.
Defining Columns and Styling in AG Grid
Column definitions in AG Grid are essential for controlling how data is visualized. Each column is defined by an object known as ColDef, which can be customized using various properties. For instance, you can define sorting behavior, filtering options, and even custom styling for each column.
AG Grid allows for the use of themes and custom styling to ensure the grid aligns with the design of your application. You can import different themes and customize them as needed. The Alpine theme, for example, is a popular choice for its modern look. Custom styling can be achieved by importing CSS files and applying them to the grid.
Working with Row Data and Models
Row data in AG Grid can be managed using different models. The client-side row model is the most common, where all data is maintained on the client and displayed by AG Grid. This is ideal for smaller datasets that can be fully loaded in the browser.
For larger datasets, AG Grid offers infinite scrolling and server-side row models. Infinite scrolling allows data to be loaded in chunks as the user scrolls, similar to social media feeds. The server-side row model, available in the enterprise version, fetches data directly from the server, making it suitable for applications with extensive data requirements.
Enhancing User Interaction with Sorting and Filtering
Sorting and filtering are critical features for interactive data grids. AG Grid allows for multi-column sorting, where users can sort by multiple columns simultaneously. This is achieved by holding a modifier key (such as shift) and clicking on the column headers. You can also customize the sorting order to suit your application's needs.
Filtering in AG Grid can be enabled by setting the filter property in column definitions. AG Grid provides several built-in filters, including text, number, and date filters. These can be customized further with comparator functions, allowing for complex filtering logic based on your data structure.
Rendering and Editing Data with AG Grid
Rendering data in AG Grid can be customized using value getters, value formatters, and cell renderers. Value getters allow you to compute values for cells dynamically, while value formatters enable you to format these values for display. Cell renderers offer the most flexibility, allowing you to define custom rendering logic using React components.
Editing data is equally flexible. AG Grid provides built-in editors for text, dates, and select fields, but you can also create custom editors using React components. This is particularly useful for creating complex or interactive editing experiences, such as color pickers or custom input fields.
Persisting and Managing Data Changes
Data persistence in AG Grid can be managed in several ways. By default, AG Grid mutates the data bound to it, which may not always be desirable. Instead, you can use events like onCellEditRequest to handle data changes manually, ensuring that changes are persisted in a way that aligns with your application's architecture.
For applications that require immutability, AG Grid can be configured in read-only mode. This mode prevents AG Grid from mutating the data directly, allowing you to handle data updates through events and API calls, ensuring a consistent state management approach.
Styling AG Grid: Cells, Rows, and Themes
Styling in AG Grid is highly customizable, allowing you to apply both global and conditional styles to cells and rows. You can use CSS classes and inline styles to achieve this. AG Grid also supports cell class rules and row class rules, which enable you to conditionally apply styles based on data values or other criteria.
Themes are another aspect of styling, with AG Grid offering several built-in themes like Alpine and Balham. These themes can be customized using CSS variables and Sass mixins, allowing you to tailor the look and feel of the grid to match your application's design language.
Conclusion
AG Grid is a versatile and powerful grid solution for React applications, offering extensive customization options for both data presentation and user interaction. Its high performance and flexibility make it suitable for a wide range of use cases, from simple data displays to complex, interactive data manipulation tools. By leveraging the features of AG Grid, developers can create rich, engaging web applications that provide a seamless user experience.
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites:
Basic React and JavaScript
Workshop level:
Beginner
This workshop has been presented at React Advanced 2022, check out the latest edition of this React Conference.
FAQ
To enable cell editing in AG Grid, set the 'editable' property to true in the column definition. For example, use 'editable: true' to make a column editable. Additionally, you can specify a cell editor like 'AG large text cell editor' for a custom editing experience.
To customize AG Grid themes, you can override global CSS styles, use theme parameters, CSS variables, or SASS mixins and functions. Start with a pre-built theme such as Alpine or Material and customize it using CSS variables for properties like background color, foreground color, and border color.
AG Grid provides several built-in cell editors including the text cell editor, large text cell editor, date editor, and select editor. For more advanced options, the enterprise version offers a rich select editor.
Yes, you can apply conditional styles to cells in AG Grid using the 'cellClassRules' property in the column definition. This property allows you to add and remove CSS classes based on specific conditions defined in a callback function.
The recommended method to update cell values in AG Grid is by using the 'valueSetter' function. This function allows you to specify how cell values should be updated and can return true or false to indicate if the update should trigger a cell refresh.
To customize row styles in AG Grid, use the 'rowStyle', 'getRowStyle', 'rowClass', 'getRowClass', and 'rowClassRules' properties on the AG Grid React component. These allow you to apply inline styles, CSS classes, and conditional class rules to rows.
To handle data persistence after cell editing in AG Grid, you can use the 'onCellValueChanged' event to capture changes and update your data source. For immutable data handling, use the 'onCellEditRequest' event in read-only mode and update the data manually.
This workshop is about AG Grid, a JavaScript grid with great performance and an ergonomic API. It covers installation, column definitions, row data, sorting, filtering, cell rendering, editing, and styling. The workshop includes exercises to practice hands-on coding. It also explores advanced topics such as value getters, formatters, cell renderers, and custom cell editors. Additionally, it covers persisting data, handling cell value changes, and styling cells and rows using cell classes, styles, and themes.
Welcome to the workshop! Today we're learning about HP Grid as part of the React Advanced Conference. I'm Bryan Love, co-founder of Live Love App, and I'm joined by Mike Ryan. We're both Google Developer Experts and Cypress Ambassadors. We'll be taking breaks every hour during this three-hour workshop. Feel free to ask any questions you may have.
The prereqs for this workshop are JavaScript and TypeScript, and basic React. AG Grid is the best JavaScript grid with great performance, extensibility, and an ergonomic API. We'll be using the AG Grid with React course on our website. All course content and exercises are available online using StackBlitz. We'll cover installation, column definitions, row data, sorting, filtering, cell rendering, editing, and styling of AG Grid.
3. Installing AG Grid and Defining Columns
To get started, install the aggrid-community and aggrid-react packages. Import the necessary base and theme CSS files from the aggrid-community module. Define columns in AG Grid using the ColumnDef object. Specify the header name and the fields of the row object to get the data from. You can also use deep references within the row data object using dot notation. AG Grid supports TypeScript with improved support in version 28.
4. Row Data and Grid Display
In AG Grid, there are different models of row data, including client-side, infinite, and server-side row models. We will primarily focus on the client-side row model. We define the row data using the row data property and initialize it with data from a JSON file. The AG Grid React component is used to display the grid, with the column definitions and row data props set up.
5. Column Definition and Exercise
We're talking about the header name property and the field property. The header name just tells AG grid what to display in that header and the field is how we're going to tell AG grid kind of to where to get the data inside of our row data object. If you have any questions, feel free to drop them in the chat and we're happy to answer those questions. Now we're going to get right in and do an exercise. We want you guys to be hands-on. So if you click on the link to open up the stack blitz exercise, that's going to pull up basically what we just did, right? We're going to start real basic here. And what I want you to do is specify the column definition, state and bind that to the ag grid react component and then set the row data state. And then we're going to set that initial value to the data products, just like we did. And then bind that to the ag grid react component with those props. Give it a try and let us know if you have any questions. We'll be here to answer. Mike also dropped into the chat a link to this StackBlitz directly. If you run into any issues or have any questions, let us know. We don't work for AGS. We're here to share what we've learned about AGGred with the community.
6. Enabling Row Sorting
We'll give you two more minutes to finish up the exercise. Set up column definitions using the useState hook and specify the name and field for each column. Bind the column definitions to the AgGridReact component. Set up the row data using the useState hook and bind it to the row data prop of the AgGridReact component. Enable sorting for a column by setting the sortable property to true. You can also specify the sorting order by providing an array of ascending and descending. Multi-column sorting is also possible.
7. Multi-Column Sorting and Override
Aggrid comes with multi-column sorting. You can override the default behavior by specifying the multisortkey table option. Set it to CTRL to use the command or control key instead of the shift key. This can be done by setting the multisortkey prop on the Aggrid React component.
8. Adding Sortable Property and Customization
Go to StackBlitz and add the sortable property to a column definition. Override the sorting order and multicolumn sorting key. Click on the column header to sort. To sort on load, use the sort prop. The initial sort only works the first time. Use the initialSort prop for customization. The initial width prop sets the column width on creation.
9. Default Column Definition and Exercise
In this section, we learn how to add the sortable property to a column definition, override the default sorting order, and change the multi-sort column sorting key. We can change the sorting icon by swapping out the default icon pack or creating a custom header component. The Sort icon appears once you click on the header, and you can use sorting order ascending, descending, null to disable sorting. Aggrid provides a default column definition that can be inherited by all columns, with specific columns being able to override the default values. An exercise on this topic is available on StackBlitz.
10. Making Columns Sortable in AADG Grid Component
Create a new default column def const in the component function and set the sortable property to true. Bind it to the default column def prop in the AADG Grid React component. Override the sortable property to be false for one column. Any questions? Let's hear the solution from Mike.
11. Default Column Definitions and Filtering
To make all columns sortable, we can use default column definitions. By defining a const called default column def, we can set basic properties that apply to all columns. We can then bind the default column def prop on the A.G. Grid React component. If we want to disable sorting for specific columns, we can override the sortable property in their column definitions. Now let's move on to filtering.
12. Filtering Column Values in AGGrid
AGGrid provides several filters for column values, including text, number, and date. To enable filtering, set the filter column definition property to true. The text filter is the default, but you can also explicitly specify the filter type using AG text column filter, AG number column filter, or AG date column filter. In the exercise, open Stackblitz and apply the appropriate filters to each column. The row data is generated by summing up order items and calculating the product price. Add the filters to the column definitions and ask any questions in the chat. Mike will then explain the solution.
13. Adding Filters to Columns
To add filters to columns in AG Grid, specify the filter property on each column definition. Use the filter property with the value true for text-based filters. For number and date columns, use the AG Number column filter and AG Date column filter, respectively. AG Grid provides built-in filters, including a clear filter option. You can customize filters using the filter params object, which allows you to add buttons and configure debounce. The browser's built-in date picker is used for date filtering, but you can customize it using extensibility features. If you need to change the date format, you can write your own filter. The date filtering in AG Grid works out of the box with JavaScript date objects. If your API returns a different format, you can use the comparator function to customize the filtering. The comparator function compares the filter date with the cell value and returns a result based on the comparison. To recap, if your row data uses JavaScript date objects, the date filtering will work without any modifications. Otherwise, you can use the comparator function to handle custom date formats.
14. Customizing Data Display with Value Getter
In AG Grid, we can customize how values get displayed using the cell rendering pipeline. We explore the value getter, value formatter, and cell renderer functions to customize data display. The value getter function is used to get row data for columns where the field property is not an option. It allows us to mutate data before providing it to the grid. The value getter params object provides information about the grid API, column API, context, data field, and more. The grid API is used for programmatically interacting with AG Grid, while the column API is used for interacting with specific columns. The row node represents a single row in the grid. To write a value getter function, we pass it inside the column definition and handle the data accordingly. An exercise is provided to practice using the value getter function to compute totals for each order.
15. Calculating Total Price with Value Getter
To calculate the total price of order items in the total column, use a value getter. The value getter should use the reduce method to iterate over the order items array, look up each product by its ID, multiply the product's value by the quantity, and sum them together. If you have any questions, feel free to ask.
16. Value Getters and Reusability
Value getters in AG Grid allow you to compute cell values based on custom logic. You can perform calculations, reference data from other sources, or customize the data provided to the grid. The value getter function receives a params object containing the data associated with the row. Using this data, you can calculate the desired value for the cell. Reusable value getters can be created as higher-order functions, allowing for code reuse across multiple grids in your application. By using a higher-order function, you can customize the logic of the value getter based on the specific requirements of each grid. Check out the example on StackBlitz for a demonstration of a multiplier value getter. This approach eliminates the need to write the same value getter code repeatedly and promotes code reusability.
17. Value Formatters and Performance
The value formatter allows us to format the computed value for a cell. It is an optional callback function that applies formatting to the value, such as localizing, showing as currency, or formatting the date. The value formatter is invoked by aggrid for each cell with a value formatter function defined. It receives the value formatter parameters object, which includes the computed value. The value formatter can customize the display or formatting of the value, and the formatted value is injected into the DOM as text. The value formatter can be used in combination with value getters and cell renderers. It is called every time a cell needs to be rendered, along with the value getter if present. The performance of the cell rendering pipeline is optimized by virtualizing the rendering of cells in large grids.
18. Value Getters, Formatters, and Cell Renderers
The value getter function can be called by default for sorting and rendering, which can have a performance impact with large datasets. AG Grid offers a value caching mechanism to optimize performance. The size and expiration of the cache can be customized. Additionally, column virtualization can be enabled or disabled based on the requirements. A value formatter can be added to format the total column with a specific currency. Reusable value formatters can be created as higher-order functions. The cell renderer allows for advanced customization of cell rendering, including complex controls and styling. It should be used sparingly due to potential performance impacts. The cell renderer can accept undefined, a registered cell renderer string, or a React component. The cell renderer params provide access to the calculated and formatted value, as well as programmatic APIs for grid control. An example of a cell renderer function is provided.
19. CellRenderers and Cell Editing
In this section, we learn about CellRenderers and how they allow for full interactive display of content inside of cells in AG Grid. CellRenderers are React components that can be used to customize the rendering of cell content. They can utilize hooks, set up refs, add event listeners, and render other React components. We also go through an exercise that demonstrates the usage of the CellRenderer function to add a CellRenderer to the Date of Order column. The exercise involves checking if the value is not undefined, returning JSX that includes a material icon next to the formatted date string, and using styling and the DateTimeFormat class to format the date. We then move on to cell editing, where we enable the editable property on the column definition to make a column editable. AG Grid provides built-in cell editors for text, large text, date, select, and rich select. We can also enable cell editing programmatically using the grid API. The default editor used when editable is set to true is the text cell editor.
20. Cell Editing and Built-in Cell Editors
To enable cell editing, set the editable property to true. You can use built-in cell editors like the large text cell editor or the select cell editor. Double-clicking on a cell allows you to make changes and save the edited data. Editing is available for various types of data, including dates and account numbers.
21. Cell Editing and Custom Cell Editors
To enable cell editing, set the editable property to true. You can use built-in cell editors like the large text cell editor or the select cell editor. Double-clicking on a cell allows you to make changes and save the edited data. The built-in cell editors are fairly basic, but you can build custom cell editors using React to let the user edit the data in the grid using more powerful controls. We're going to build a custom color cell editor component using React. A cell editor has a get value method that is invoked after editing is complete. To establish this communication, we use the use imperative handle hook to customize the ref that gets forwarded back to ag-grid and expose the callback functions that ag-grid expects.
22. Custom Cell Editor with React
In this example, we're building fancy inputs for ag-grid using React. We use the useImperativeHandle hook to expose the getValue method that reads the value from the input. The input is focused when the cell editor is opened using the useRef and useEffect hooks. The color picker is rendered as an input with the type set to color. The color value is updated in state when the user selects a new color. The getValue method is called by ag-grid to retrieve the final color value. To configure the custom cell editor, we specify the function as the cell editor in the column definition. The useState hook manages the cell editor's value, the useRef hook sets up a ref for the color input, and the useEffect hook focuses the input when the cell editor is opened.
23. Custom Cell Editing Solution
To set the initial value of the input, use props.value. Return the current value in the get value function. Set the cell editor property to the color editor and the editable property to true. Now you can change the color using a custom component for cell editing.
24. Persisting Data with Value Setter
We'll discuss how to persist data in AG Grid when using the cell editing experience. By using the value setter function, we can notify AG Grid of data updates and refresh the cell accordingly. The value setter function is invoked by AG Grid with the old and new values as parameters. If the values are the same, we return false to indicate that the cell does not need to be refreshed. If the values are different, we can notify a parent component and return true to trigger a cell re-render. This allows us to handle data mutations and avoid unnecessary cell rendering.
25. Handling Cell Value Changes
We can listen for changes in two ways: by checking if the old value strictly equals the new value or by handling the onCellValueChanged event. The onCellValueChanged event is emitted whenever a cell value is updated after a user edit. By binding to the onCellValueChanged prop, we can inspect the old and new values. This allows us to get notifications of changes made by AGgrid, even if we want it to manage the data.
26. Handling Data Changes and Styling in AGGrid
AGGrid provides an onCellEditRequest event that allows you to handle data changes yourself when the grid is in read-only mode. To use this event, you need to put the grid in read-only mode and provide stable references to each row using the getRowId prop. You can then handle the SellEditRequest event, which provides the previous and new values. It is recommended to use immutable data structures and the Grid API's setRowData method to update the cell value. AGGrid also allows you to customize the styling of cells and rows using cell styles, cell classes, and cell class rules. When overriding global CSS styles, be cautious not to change CSS positioning, overflow, or pointer events as it may cause issues with the grid. AGGrid provides several pre-built themes that can be customized to style the grid.
27. Styling Individual Cells in AG Grid
We can style individual cells in AG Grid by using cell classes, cell styles, and cell class rules. Cell classes are conditionally applied, added, or removed to cells based on logic defined in a callback function. Cell styles can override existing styles on cells, but they are never removed. Cell class rules allow for both adding and removing classes based on specified rules. AG Grid manages the application of classes based on the rules provided in the column definition.
28. Row Styling in AG Grid
Let's explore row styling in AG Grid. We can add styles to all rows using row styles and conditionally apply styles using the getRowStyle callback. The row class allows us to set classes for all rows, and the getRowClass callback enables conditional class application. Row class rules let us add and remove classes based on conditions. These styling options are useful for highlighting rows and indicating selection.
29. Styling AG Grid with Themes
Agigrid provides several themes, including bollum, Alpine, and material. Each theme has its own characteristics and density. The bollum and Alpine themes offer dark mode options. Customizing themes is possible using theme parameters, CSS variables, CSS rules, and Sass mixins and functions. CSS variables are recommended for customization, allowing for runtime changes. Targeting built-in classes is also an option, but caution must be exercised to avoid overriding critical style properties. Starting with one of the provided themes and then customizing it is a common approach. It is also possible to write a custom theme, although the complexity of doing so is unknown. Overall, AG Grid offers flexibility in styling, allowing you to meet your product's user requirements. If you have any questions, feel free to reach out to us. We appreciate your participation and hope you enjoy the rest of the conference.
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 🤐)
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.
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.
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.
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.
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
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.
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.
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
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.
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.
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.
Comments