I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!

I'll be talking about standardizing signals in TC39. Immediate mode wipes out the whole screen and writes a new one, while retained mode changes only what is necessary. Signals represent a cell of data that can change over time. The correct solution is to topologically sort dependencies and evaluate them in a coherent order. Standard signals allow for code sharing across frameworks and the creation of reusable infrastructure. The signal API is designed to be wrapped by different frameworks. Standards can achieve more portability and reduce the need to lock into specific ecosystems. The API includes a watcher, a set of signals being observed, with a synchronous callback made when the first member becomes potentially dirty. The speaker discusses how signals relate to state management libraries in React and mentions the potential for signals to become a web standard in the future.

AI design challenges include bias, safety, and security. Trust and transparency are important in AI. Design principles for AI include user control, fighting bias, and promoting good decision-making. AI can enable the design process and investors expect to see it included in products. AI empowers individuals to create and share ideas, but managing expectations is crucial.

In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.

We asked co-sponsors to present React, an essential framework for web and mobile developers. TypeScript improves the development experience. Let's talk about the neglected topic of JavaScript leaks and how Chrome handles them. Leaks are easy to create, even for good developers. We crashed browsers due to memory leaks. Solution: fully reload the page after soft navigations. Today we have tools to fix leaks. The first step is admitting you have a problem. Use the reporting API to collect data on memory leaks. If you have a problem, it's not just a single leak. Debug and take memory snapshots. Load the page, perform an action, go back. Compare snapshots to find leaks. Use Memlab by Facebook to identify leaked objects. Memlab tells us memory is used, leaks are everywhere. Chrome extension helps with exporting actions to scenario.js file. 50 users already. Fixing memory leaks involves finding and nullifying unused objects. Spot the leak in a simple React component that adds event listeners. Removing the component leaves the listeners behind. In session two, adding a set interval creates additional listeners. Debugging with Memlab and using non-minified code and named functions helps identify the leaks. Solution: add a component. In React, frameworks provide ways to clean up after components are removed. Spotting a leak in uppercase spelling of mount. Hooks offer use effect to handle cleanup. A use effect allows you to return a function for cleanup. Spot the weird memory leak caused by console logs. Try the reporting API, check your framework, use null, and find your first leak. Memory leaks may be more significant on a mobile browser due to limited available memory. Differentiating between leaked memory and growing global state can be determined by the app's architecture. Checking for memory leaks on mobile can be done using dev tools and manual inspection or by using Puppeteer and the developer tools protocol for emulation. The lack of naming and bindings for anonymous functions in a codemark plugin is a potential area for improvement. Neglect and the excessive amount of JavaScript are common culprits for poor web performance. Facebook's experience with redesigning their website highlighted the need for tools to address the performance bottleneck caused by JavaScript. Throttling the CPU can be effective. Developers should set objects to null when they are no longer needed, allowing the garbage collector to clean up. Chrome DevTools provides options for detecting console log memory objects. WeakRefs and WeakMaps can be useful for cleaning up memory leaks. Integration with tools like MemLab can help regression test releases for memory leaks. We are still early in memory leaks tooling. Raising awareness about the problem is important. Lighthouse scores are not the sole indicator of a fast website. Additional testing and familiarity with Core Web Vitals are recommended.

This talk is a ten-year retrospective into the growth of the Vue.js framework as an open-source project. It highlights the challenges faced by open-source developers, the importance of finding balance and managing scope, and the collaborative nature of the Vue community. The talk also discusses the development of Vite as a build tool and the vision for a unified JavaScript toolchain. It emphasizes the need for community alignment, contributions, and testing, while acknowledging the challenges of bad actors in the open-source community.

Tech startups require scaling the business, the team, and the tech. The goal of an engineering team at a startup is to not be the reason for the business to slow down. Engineers prioritize business outcomes over code debates. Simplify your code and prioritize solving the specific problem. Organize your code vertically to limit complexity and improve clarity. To avoid code problems in the future, focus on getting the data and architecture right rather than striving for perfection today. Balancing dry and duplicating code can be achieved by allowing patterns to develop and observing for common solutions.

We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.