---
title: "React Router v6, a major rewrite"
publication: "React Status"
issue: 264
published_at: "2021-11-10"
canonical_url: "https://react.statuscode.com/issues/264"
---

Plus Shopify's new React based ecommerce framework. |        

#​264 — November 10, 2021 

[Read on the Web](https://react.statuscode.com/issues/264)   React Status ⚛️ Your weekly React news digest, _every Wednesday_.  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/z21tnacvjnj3hh9v1w1k.jpg)](https://www.smashingmagazine.com/2021/11/hydrogen-react-framework-dynamic-contextual-personalized-ecommerce/)  

[Meet Hydrogen: Shopify's React Framework for Dynamic, Contextual and Personalized E-Commerce](https://www.smashingmagazine.com/2021/11/hydrogen-react-framework-dynamic-contextual-personalized-ecommerce/) — [Hydrogen](https://hydrogen.shopify.dev) is an under-development React-powered framework bringing technologies like React Server Components and Vite into play for building entirely custom storefronts on the Shopify ecommerce platform. **Note that it is not a final release (that's due next year) but is a [public developer preview.](https://www.shopify.com/partners/blog/hydrogen-developer-preview)** 

Ilya Grigorik (Shopify)   

[React Router v6 Released](https://remix.run/blog/react-router-v6) — “Built from scratch using React hooks” headlines the new version of [React Router](https://reactrouter.com). It’s the first major release with breaking changes to the API in four years and it’s intended to replace all previous versions along with the experimental [Reach Router](https://reach.tech/router/). It’s also being used as a core for [Remix](https://remix.run) “a new web framework that is going to help you build better websites”. 

Michael Jackson (Remix)   

🤔 Want to learn more about React Router 6? Robin Wieruch already has [a tutorial for you](https://www.robinwieruch.de/react-router) to follow.  [![\](https://copm.s3.amazonaws.com/2bcf39b1.png)](https://frontendmasters.com/courses/gatsby-v2/?utm_source=reactstatus&utm_medium=email&utm_campaign=gatsby) 

[New & Updated Course: Introduction to Gatsby with Jason Lengstorf](https://frontendmasters.com/courses/gatsby-v2/?utm_source=reactstatus&utm_medium=email&utm_campaign=gatsby) — Learn to build blazing-fast apps and websites with React using Gatsby, covering all angles from using GraphQL to store and retrieve data, image optimization, displaying third party data in components, right through to deployment. 

Frontend Masters sponsor   

[Code of Frankenstein: Iteratively Migrating ASP.NET MVC Razor to React and TypeScript](https://medium.com/@tysonnero/iteratively-migrating-asp-net-mvc-razor-to-react-typescript-e0330fe81b4e) — An account of what you could face should you need to migrate a codebase from a long-in-the-tooth Microsoft-oriented development stack. 

Tyson Nero   

[Teaful: Tiny, Easy and Powerful React State Management](https://aralroca.com/blog/teaful) — A new entrant (most recently known as _Fragstore_) into the React state management sweepstakes for the smallest solutions. At less than 1KB, this library is a strong contender in that department. 

Aral Roca    

Jobs  

[[EU\] JavaScript Developer, Preferably with React Knowledge](https://jobs.smartrecruiters.com/lmgroup/743999721557406-javascript-developer) — New hires get a "buddy" who will guide you through the company, code and the process. Newest technologies, development possibilities and satisfaction :) 
LastMinute.com   

[Senior Mobile Developer (React Native/Node) – Remote](http://app.jobvite.com/m?3UJD6mwd) — Join Sippd.com, the Forbes Next1000 startup changing how users find and buy alcohol with AI & computer vision. We’re looking for a generalist that loves growth hacking and taking big bets. 
Sippd   

[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) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. 
Hired      

[Using React Query for Any Slow Operations, Not Just API Requests](https://swizec.com/blog/you-can-use-react-query-for-slow-computation-not-just-api/) 
Swizec Teller   

[A 10 Question React Code Review Routine](https://www.chakshunyu.com/blog/this-is-my-10-questions-react-code-reviewing-routine/) 
Chak Shun Yu   

[Common React Hook Mistakes You Should Avoid](https://blog.bitsrc.io/common-react-hooks-mistakes-every-developer-should-avoid-defd47d09d8c) 
Piumi Liyana Gunawardhana   

[Building an Encyclopedia With React and Wikipedia Search API](https://blog.openreplay.com/building-an-encyclopedia-with-react-and-wikipedia-search-api/) 
Ekekenta Odionyenfe  

🛠 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lzqibspr8iufzglseoal.jpg)](https://github.com/software-mansion-labs/react-freeze)  

[React Freeze: Prevent React Component Subtrees From Rendering](https://github.com/software-mansion-labs/react-freeze) — Uses the Suspense mechanism introduced in React 17 to ‘freeze’ component subtrees so they don’t unnecessarily re-render when they’re not visible to the end user. 

Software Mansion   

[Recoil 0.5: A New Version of the 'Experimental' State Management Library](https://github.com/facebookexperimental/Recoil) — [Recoil](https://recoiljs.org) is the ‘Reactish’ approach to state management from the team at _[Meta Experimental](https://github.com/facebookexperimental)_ (formerly _Facebook Experimental_) where their leading edge initiatives are developed. 

Meta Experimental   

[How To Use and Customize the KendoReact DatePicker Component](https://www.telerik.com/blogs/how-use-customize-kendoreact-datepicker?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-general&utm_content=blog-customize-datepicker&utm_content=blog-customize-datepicker) 

Progress KendoReact sponsor   

[Reactstrap 9.0: Stateless React Components for Bootstrap 5](https://github.com/reactstrap/reactstrap) — Here’s [how to get started](https://reactstrap.github.io/) with it. 

reactstrap   

[React Native BLE PLX: Low Energy Bluetooth Library](https://github.com/dotintent/react-native-ble-plx) — [Bluetooth Low Energy](https://en.wikipedia.org/wiki/Bluetooth_Low_Energy) is a technology used heavily in the wearable health and fitness peripheral space. This library opens up React Native integration with these devices. 

Intent   

[axios-hooks: Hooks for the Long Standing HTTP Client](https://github.com/simoneb/axios-hooks) — [Axios](https://axios-http.com) is a mature, and still very popular, [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)-based HTTP client. 

Simone Busoli   

[React Date Picker 4.3.0: A Simple and Reusable Date-Picker Component](https://github.com/Hacker0x01/react-datepicker) — A mature option that continues to get frequent updates. [Demo here.](https://reactdatepicker.com/) 

HackerOne   

[React Firebase Hooks](https://github.com/CSFrequency/react-firebase-hooks) — Further simplifying React’s integration with [Firebase](https://firebase.google.com) taking its inspiration from [RxFire](https://github.com/FirebaseExtended/rxfire). 

CS Frequency   

[gatsby-starter-ts: Gatsby + TypeScript Starter Project](https://github.com/jpedroschmitz/gatsby-starter-ts) — A starter template for the increasingly popular tool combination for static site generation. 

João Pedro Schmitz    

## ⚡️ Quick Bits: 

- [react-animated-numbers](https://npmjs.com/package/react-animated-numbers) — Make your app's users feel like their lottery numbers have finally come in. [Demo.](https://optimistic-noyce-cf2473.netlify.app/)
- [react-showroom](https://react-showroom.js.org/) — Document your components from their TypeScript definition.
- [react-paginate](https://npmjs.com/package/react-paginate) — Break long lists into manageable pages.
- [react-chicane](https://github.com/zoontek/react-chicane) — "A simple and safe router for React and TypeScript".          

This issue was curated by Terence C. Gannon 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