--- title: "Next.js 9.4, accessible animations, and rethinking SPAs" publication: "React Status" issue: 188 published_at: "2020-05-13" canonical_url: "https://react.statuscode.com/issues/188" --- This week's React news, links, and libraries #188 — May 13, 2020 [Read on the Web](https://react.statuscode.com/issues/188) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1589367955/eozf3bfykbtryjjpoxqk.png)](https://joshwcomeau.com/react/prefers-reduced-motion/) [Accessible Animations in React](https://joshwcomeau.com/react/prefers-reduced-motion/) — An extensive look at using the `prefers-reduced-motion` media query (including using it with `matchMedia` in JavaScript) to disable animations for users who have that preference set. josh w comeau [Next.js 9.4 Released: The React Powered Site Building Framework](https://nextjs.org/blog/next-9-4) — Just two months after [9.3](https://nextjs.org/blog/next-9-3) (which was already an exciting release) comes the even more significant 9.4 which includes [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh), a new “instantaneous” hot reloading experience, plus [incremental static generation](https://nextjs.org/blog/next-9-4#incremental-static-regeneration-beta) where static pages can be generated or re-rendered in the background as traffic comes in. Vercel [![\](https://copm.s3.amazonaws.com/93f49c68.png)](https://ionicframework.com/react?utm_source=newsletter&utm_medium=email&utm_campaign=react%20status&utm_content=20200513) [One Codebase. Any Platform. Just React](https://ionicframework.com/react?utm_source=newsletter&utm_medium=email&utm_campaign=react%20status&utm_content=20200513) — Build awesome apps across mobile, desktop, and web, with the React you know and love. Choose from over 100 mobile-ready components with built-in animations, gestures, and theming capabilities to fit your brand. Ionic React sponsor [How Facebook Has Rebuilt Their Tech Stack for Facebook.com](https://engineering.fb.com/web/facebook-redesign/) — Facebook completely rebuilt its tech stack to achieve its performance and growth goals. Here’s how they’ve done it with React, Relay, SVG, code-splitting, and more. Ashley Watkins (Facebook) [Kea 2.0: Production Ready State Management for React](https://kea.js.org/) — Kea is a long standing project that was rewritten to modern React standards earlier this year and essentially offers a better abstraction between React and Redux. [Here’s how it works.](https://kea.js.org/docs/introduction/what-is-kea) Marius Andra and Contributors [Dan Abramov: "Client-side-only is not sustainable."](https://twitter.com/dan_abramov/status/1259614150386425858) — There’s a lot of context to get around here, but I know many of you will find this useful. This thread was inspired by [Second-Guessing the Modern Web](https://macwright.org/2020/05/10/spa-fatigue.html) by Tom MacWright, a critique of modern React single page app architecture. Dan Abramov on Twitter 💻 Jobs [Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77585) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. Vettery ℹ️ _Interested in running a job listing in React Status? There's [more info here.](https://booking.cooperpress.com/jobs)_ 📘 Tutorials and Stories [How to Style with CSS in React](https://www.robinwieruch.de/react-css-styling) — A look at the different approaches to writing CSS in React projects – including CSS-in-JS, module-based CSS, and utility-first CSS. Robin Wieruch ▶[Discussing RedwoodJS with Tom Preston-Warner](https://shoptalkshow.com/412/) — A couple of months ago we featured [RedwoodJS](https://redwoodjs.com/), a React, GraphQL, and Prisma-based framework aiming to ‘bring full-stack to the JAMstack’. In this hour long podcast, Tom really gets into the details of what makes it tick. The Shop Talk Show podcast [How to Build a Blog with Next 9.3, Netlify, and Markdown](https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.3-and-netlify/) — Learn how to build a Next.js-powered Markdown blog and deploy it to the Netlify platform. Cassidy Williams [A Better Way to Use GraphQL Fragments in React](https://dev.to/aleccool213/a-better-way-to-use-graphql-fragments-in-react-33oo) Alec Brunelle [Intro to KendoReact UI Component Library: 6-Minute Get Started Video](https://www.telerik.com/videos/kendo-react-ui/intro-to-kendoreact-ui-component-library-data-grid-datepicker-examples?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-evaluation-getting-started-video-tj&utm_content=sponsored-link) — Built by developers for developers, KendoReact is a commercial UI component library that speeds things up. [Get started](https://www.telerik.com/videos/kendo-react-ui/intro-to-kendoreact-ui-component-library-data-grid-datepicker-examples?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-evaluation-getting-started-video-tj&utm_content=sponsored-link%20). Progress KendoReact sponsor [How We Reduced Our React Native App Size with a Few Simple Fixes](https://t.co/twyKAIkL7B?amp=1) — The tale of getting an APK down from 27MB to under 14MB by optimizing their bundle, optimizing images, shrinking fonts, and more. Hugo Grochau [My React Components Render Twice! Why?](https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/) — _“Many developers who use modern React wonder why their components render twice during development but this is actually happening for a good reason.”_ Marios Fakiolas [Comparing Ember Octane and React](https://www.pzuraq.com/comparing-ember-octane-and-react/) — This is about as detailed a comparison as you could hope for. [Octane](https://emberjs.com/editions/octane/) really kicks things up a notch for Ember against React, too. Chris Garrett 🔧 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1572621060/h0gcsdlbsdep1ue9dzul.png)](https://github.com/jasminmif/react-interactive-paycard) [Interactive React Paycard: A Smooth Credit Card Form](https://github.com/jasminmif/react-interactive-paycard) — We featured this React take on [vue-interactive-paycard](https://github.com/muhammederdem/vue-interactive-paycard) several months ago but it has since been refactored to use hooks and functional components. jasminmif [scalajs-react 1.7: React, but on Scala.js](https://github.com/japgolly/scalajs-react/blob/master/doc/changelog/1.7.0.md) — A project designed to take React into the world of [Scala.js](https://www.scala-js.org/), a Scala to JavaScript transpiler (and front-end dev ecosystem of its own). David Barri [React Pixi 2.0: Write Pixi Apps Using React's Declarative Style](https://reactpixi.org/) — [PixiJS](http://www.pixijs.com/) is a fast 2D Web graphics engine that abstracts WebGL and HTML5 Canvas. Patrick Brouwer [Read Now: The Complete Guide to Distributed Tracing](https://go.lightstep.com/register-complete-guide-to-distributed-tracing.html?utm_campaign=react&utm_source=cooper&utm_medium=Email) Lightstep sponsor [react-hotkeys-hook: Hook for using Keyboard Shortcuts in Components](https://github.com/JohannesKlauss/react-hotkeys-hook) Johannes Klauss [react-circular-input: Component for Composing a Circular Range Input](https://react-circular-input.now.sh/) — Quite elegant. There’s a nice demo right on the homepage. Pete Correia [React Smooth Range Input: Attractive Input Range Selectors](https://react-smooth-range-input.now.sh/) — A neat looking effect for selecting a number from a range. Blue Bill 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