--- title: "React gets a new 'Canary' release channel" publication: "React Status" issue: 338 published_at: "2023-05-10" canonical_url: "https://react.statuscode.com/issues/338" --- Plus leaving and coming back to React, all aboard Next.js's new app router, a tree graph component, and ways to visualize what's going on with your components. | #​338 — May 10, 2023 [Read on the Web](https://react.statuscode.com/issues/338) Together with [![Marmelab\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_80,h_80/e_make_transparent/co_white,e_outline:7/dm18iacxtihcjqax5xxv.png)](https://marmelab.com/react-admin/) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ifhlsog4dtrkbdifnk1i.jpg)](https://nextjs.org/blog/next-13-4) [Next.js 13.4 Released](https://nextjs.org/blog/next-13-4) — Despite the minor version bump, this is a big release for the popular React framework. The new app router and its improved approach to filesystem based routing is now offered as a _stable_ feature, with a new concept of _server actions_ being introduced in alpha as a way to mutate data on the server without needing to create an in-between API layer. Tim Neutkens and Sebastian Markbåge As part of this release, the beta docs have been [🐦 merged back](https://twitter.com/leeerob/status/1654181055740497939) into the [main Next.js docs](https://nextjs.org/docs) so they're more up to date than ever and offer some niceties like dark/light theming and a Cmd+K search feature. [React Canaries: Enabling Incremental Feature Rollout Outside Meta](https://react.dev/blog/2023/05/03/react-canaries) — A little birdie told us (_groan.._) that React now has a new ‘canary’ release channel in a similar style to Chrome Canary. The idea is that you can more quickly use bleeding edge features of React but in an officially supported release. The React Core Team [![\](https://copm.s3.amazonaws.com/7e9daa76.png)](https://marmelab.com/react-admin/) [React-Admin: The Open-Source Framework for B2B Apps](https://marmelab.com/react-admin/) — From simple dashboards to complex admin panels for your entire company, react-admin unleashes the true productivity of React. Join more than 20k devs already building web apps like they play Lego, thanks to 230+ business-oriented components. Marmelab/React-admin sponsor ▶['I'm Done With React'](https://www.youtube.com/watch?v=Zt8mO_Aqzw8) — Going from least-to-most important, the reasons this developer isn't choosing React for future projects make for interesting watching, particularly if you too are overwhelmed by upheaval in the React world. [Solid](https://www.solidjs.com/) is one of the alternatives he has warmed to. Adam Elmore 🤔 Jens Langhammer's [I gambled against React and lost (and I don’t regret a thing)](https://goauthentik.io/blog/2023-05-04-i-gambled-against-react-and-lost) provides an interesting counterpoint. [How to Structure Your Next.js App with the New App Router](https://betterprogramming.pub/how-to-structure-your-next-js-app-with-the-new-app-router-61bf2bf5a20d) — Learn how to organize your modern Next.js project using a feature-driven structure with the new [App Router](https://nextjs.org/docs/app/building-your-application/routing) which, the author asserts, enables greater flexibility and efficiency in development. Alen Ajam [A Follow-up to Dan Abramov's React Server Component Quizzes](https://betterprogramming.pub/grok-react-server-component-by-quizzes-df4417905bc4) — Dan intended for [these quizzes](https://twitter.com/dan_abramov/status/1648923232937058304) — delivered via [🐦 his Twitter account](https://twitter.com/dan_abramov) — to challenge and enhance his audience’s understanding of React Server Components. This article provides a helpful companion explanation. Herrington Darkholme [A Guide to Using Redux Toolkit with TypeScript](https://www.smashingmagazine.com/2023/05/guide-redux-toolkit-typescript/) — [Redux Toolkit](https://redux-toolkit.js.org/introduction/getting-started) provides a standard way to work with Redux. This tutorial shows off the practicalities. Deepak Kumar [React Authentication, Simplified](https://userfront.com/tutorials/react-authentication?&utm_source=react-statuscode-com&utm_medium=newsletter&utm_campaign=brief_link&utm_content=react_authentication) Userfront sponsor [Build a Multi-Step Form with React Hook Form](https://claritydev.net/blog/build-a-multistep-form-with-react-hook-form) — Use [React Hook Form](https://react-hook-form.com) to build a basic, multi-step registration form to collect a user's data and then present it in a confirmation view where it can be reviewed and edited. Alex Khomenko [The Safest Ways to Hide Your API Keys When Using React](https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/) Jessica Joseph 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/dungszj65mwmtvx0guxj.jpg)](https://bkrem.github.io/react-d3-tree/) [React D3 Tree: Interactive Tree Graph Component](https://bkrem.github.io/react-d3-tree/) — Handy for things like family trees or org charts. There are a few practical examples on display here. Uses D3 for rendering. [GitHub repo.](https://github.com/bkrem/react-d3-tree) Ben Kremer [❤️ Loving console.log Is Easy, but Hate 😡 Losing Context to View Messy Output](https://console-ninja.com?utm_source=cooperpress&utm_medium=reactstatus&utm_content=reactstatus) — Developer productivity tools [Wallaby.js](https://wallabyjs.com?utm_source=cooperpress&utm_medium=reactstatus&utm_content=reactstatus), [Quokka.js](https://quokkajs.com?utm_source=cooperpress&utm_medium=reactstatus&utm_content=reactstatus), and [Console Ninja](https://console-ninja.com?utm_source=cooperpress&utm_medium=reactstatus&utm_content=reactstatus) show console.log values and errors right next to your code. Wallaby.js sponsor [Ink UI: UI Components for React Based CLIs](https://github.com/vadimdemedes/ink-ui) — [Ink](https://github.com/vadimdemedes/ink) is a popular React renderer that offers the same component-based UI building experience but for command-line apps, and it’s taking a step forward splitting out some handy components into a separate package. Vadim Demedes [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/x3nf0mfjy7lnhys8jd9o.jpg)](https://github.com/Oblosys/react-lifecycle-visualizer) [React Lifecycle Visualizer 3.1: Real-Time Visualization of Lifecycle Methods](https://github.com/Oblosys/react-lifecycle-visualizer) — It’s been five years since we linked to this, but it’s maintained and now supports React 18. Use it to visualize the lifecycle methods of _class_ components. **[React Hook Tracer](https://github.com/Oblosys/react-hook-tracer) provides similar functionality for function components.** Martijn Schrage - [React Wrap Balancer 0.5](https://github.com/shuding/react-wrap-balancer) ↳ Makes titles more readable. ([Demo.](https://react-wrap-balancer.vercel.app/)) - [Yet Another React Lightbox 3.6](https://github.com/igordanchenko/yet-another-react-lightbox) ↳ Modern React lightbox component. ([Examples.](https://yet-another-react-lightbox.com/examples)) - [Jotai 2.1](https://github.com/pmndrs/jotai) ↳ Primitive, flexible state management for React. - [gridstack.js 8.1](https://github.com/gridstack/gridstack.js) ↳ Dashboard layout and creation library. - [Recharts 2.6](https://github.com/recharts/recharts) – Chart library atop D3. - [React-Chrono 2.2](https://github.com/prabhuignoto/react-chrono) – Modern timeline component. - [Million 2.3.2](https://github.com/aidenybai/million) – Virtual DOM replacement. Jobs [Find React Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired This issue was curated by Terence C. Gannon and Peter Cooper and edited by the Cooperpress team. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom