RD#477 React Folder Structure in 5 Steps

React Folder Structure in 5 Steps
18 minutes by Robin Wieruch

Organizing large React applications into folders and files is a topic that often sparks strong opinions. I found it challenging to write about this, as there isn't a definitive "correct" approach. However, I frequently get asked how I structure my React projects, from small to large, and I'm happy to share my approach.

Tests are dead. Meticulous AI is here.
sponsored by Meticulous

Meticulous AI is a tool which automatically creates and maintains a continuously evolving e2e UI test suite that covers every corner of your application – with no developer intervention required whatsoever. Backed by CTO of GitHub, Guillermo Rauch (next.js author), yc and others, it's built from the Chromium level up with a deterministic scheduling engine – making it the only testing tool that eliminates flakes.

The True Nature of useActionState
15 minutes by Nikhil Snayak

Unlocking powerful async control and state synchronization for smooth UI transitions. Nikhil compares useActionState to the familiar useReducer hook, highlighting similarities in their signatures. The post then explores how to use useActionState to handle asynchronous operations, implement optimistic updates, and manage errors effectively.

How Microsoft Edge Is Replacing React With Web Components
8 minutes by Richard MacManus

Microsoft's Edge browser team is transitioning from React to web components with their WebUI 2.0 project, aiming to make Edge faster for users. The goal is to convert about 50% of existing React-based UIs in Edge to web components by the end of the year. This shift is driven by performance issues, particularly on low-end machines, caused by React's implementation in Edge.

useContextSelector: Speeding Up React Apps With Large Context
8 minutes by Guillaume Pierson and François Zaninotto

This text discusses the performance issues associated with large React contexts and proposes several solutions. The main problem is that changes in a large context cause unnecessary re-renders of all dependent components. Solutions include splitting components with memo, using split contexts, employing state management libraries like Redux, and utilizing the use-context-selector library.

Drag to Select
22 minutes by Joshua Wootonn

Drag selection is the defacto pointer multi-selection. In this guide we'll recreate native-like drag selection in react.

newsletters

Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.