--- title: "New releases of Next.js and Gatsby" publication: "React Status" issue: 262 published_at: "2021-10-27" canonical_url: "https://react.statuscode.com/issues/262" --- Plus a big React docs update, and the usual libraries and tool updates. | #​262 — October 27, 2021 [Read on the Web](https://react.statuscode.com/issues/262) React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/m4xgswso8jlnpqbhe69x.jpg)](https://beta.reactjs.org/) [The New React Docs, In Progress and Now In Beta](https://beta.reactjs.org/) — The React docs are being entirely rewritten to use hooks rather than classes, introduce illustrations, and generally bring them up to modern speed. This currently-in-beta version also includes interactive examples and challenges with the objective of improving the learning experience. React Core Team [Next.js 12 Released](https://nextjs.org/blog/next-12) — The popular Node.js + React development framework takes its biggest step forward yet with an array of improvements including beta support for middleware, React 18 support, native ES module support, a Rust-powered compiler for 5x faster builds, and more. The Vercel Team [![\](https://copm.s3.amazonaws.com/3181a4ee.png)](https://frontendmasters.com/learn/functional-javascript/?utm_source=reactstatus&utm_medium=email&utm_campaign=learningpath) [Power Up Your JavaScript with Functional Programming](https://frontendmasters.com/learn/functional-javascript/?utm_source=reactstatus&utm_medium=email&utm_campaign=learningpath) — Learn core functional JS programming techniques by coding with pure functions, learning recursion, higher-order functions, closures, currying, function composition, and more. Frontend Masters sponsor [What’s New in Gatsby 4 (Now Fully Released)](https://www.gatsbyjs.com/blog/whats-new-in-gatsby-4/) — Gatsby is a React-based open source framework and v4 introduces new content rendering methods, new build and deployments architecture, new CMS APIs, and more. Jeff James (Gatsby) [The CSS-in-React Landscape](https://css-tricks.com/the-css-in-react-landscape/) — There is no specific, officially sanctioned styling solution for React, so you’ll likely end up choosing one of the libraries covered in this survey of candidates. Chris Coyier ▶[Implementing a 'Candy Crush' Game with React](https://www.youtube.com/watch?v=PBrEq9Wd6_U) — The latest of Ania’s no-nonsense all-about-the-code screencasts walking through the creation of a simple puzzle game. While Candy Crush likely doesn’t need to be re-invented, you can apply the skills learned to a variety of game scenarios. Ania Kubów Jobs [Sr. Frontend-Focused Engineer (Remote in Germany)](https://www.finanzchef24.de/ueber-uns/jobs/product-development/frontend-focused-engineer) — You love developing digital products that solve true customer problems? Join us to reinvent business insurances. #React #GraphQL Finanzchef24 [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 [A React Rendering Cheat Sheet](https://alexsidorenko.com/blog/react-render-cheat-sheet/) — When does a component re-render? What can cause such re-renders, and how can unnecessary ones be prevented? Alex Sidorenko [Migrating from React Redux to React Query](https://blog.theodo.com/2021/10/migrating-from-react-redux-to-react-query/) — [React Query](https://react-query.tanstack.com) is rapidly gaining in popularity, which might be because developers are discovering it’s quicker and easier to use than [Redux](https://react-redux.js.org). Robert Hofmann [How to Create CSS Custom Properties That Dynamically Update with React & JavaScript](https://spacejelly.dev/posts/how-to-create-css-custom-properties-that-dynamically-update-with-react-javascript/) Colby Fayock ▶[A First Introduction to Test Driven Development with React](https://youtu.be/7WY1cfRoUJk) Coding With Adam [How to Use `useRef` Correctly with Examples](https://blog.notesnook.com/react-useref-hook-with-examples/) Ammar Ahmed 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lfbkta1huldc0ikv5lov.jpg)](https://github.com/prabhuignoto/react-chrono) [react-chrono: A Modern Timeline Component for React](https://github.com/prabhuignoto/react-chrono) — Render a themeable timeline in 3 unique modes (vertical/horizontal, tree, or auto-playing slideshow). Also includes keyboard navigation support. [Try it here](https://react-chrono.vercel.app/). Prabhu Murthy [React Native Testing Library 8.0](https://github.com/callstack/react-native-testing-library) — Now in it’s eighth major release, RNTL will help create maintainable tests for your React Native projects. Callstack [Blitz.js: Rails-Like Framework for Monolithic, Full-Stack React Apps](https://blitzjs.com/) — A ‘batteries included’ framework built on Next.js that boasts a ‘zero API’ approach eliminating the need for a REST/GraphQL API for the data layer. Brandon Bayer and Blitz.js Contributors [Make Large-Scale Changes 75% Faster with Batch Changes](https://about.sourcegraph.com/batch-changes/?utm_medium=text&utm_source=react-status&utm_campaign=batch-changes&content=brief-link) Sourcegraph sponsor [Rowy: A Grid Component for Google Cloud Platform](https://github.com/rowyio/rowy) — Want an [Airtable](https://www.airtable.com)-like experience with integrations to [SendGrid](https://sendgrid.com), [Twilio](https://www.twilio.com) and [Slack](https://www.slack.com)? GCP only due to using Firestore as its real time data source. Rowy [The Matchbox Design System and Component Library](https://github.com/SparkPost/matchbox) — The design system and UI that powers the [SparkPost](https://www.sparkpost.com) bulk email management platform. SparkPost [Rakkas: An Alternative to Next.js?](https://github.com/rakkasjs/rakkasjs) — A developer experience akin to [Next.js](https://nextjs.org) with features inspired by [Svelte](https://svelte.dev). rakkasjs ## ⚡️ Quick Bits: - [Splitter](https://github.com/DevbookHQ/splitter) — Splits views into resizable VS Code-inspired panels. - [react-simple-image-slider](https://github.com/kimcoder/react-simple-image-slider) — Configurable, carousel-like functionality as illustrated in their interactive [demo](https://kimcoder.github.io/react-simple-image-slider/). - [React Google Analytics 4](https://github.com/PriceRunner/react-ga4) — Integrate with the latest version of the ubiquitous web analytics platform. - [ReactDataGrid](https://github.com/inovua/reactdatagrid) — A data grid built specifically with React in mind. - [react-native-svg-app-icon](https://npmjs.com/package/react-native-svg-app-icon) — Generate all the application launcher icons for your projects from a single SVG file. 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