--- title: "Remix goes open source" publication: "React Status" issue: 266 published_at: "2021-11-24" canonical_url: "https://react.statuscode.com/issues/266" --- Plus a visual guide to refs, React Redux v8 in beta, and Vercel's big funding round. | #​266 — November 24, 2021 [Read on the Web](https://react.statuscode.com/issues/266) React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/apvi2j6m4nmnqooq1m8a.jpg)](https://varun.ca/modular-webgl/) [How to Build Stunning 3D Scenes with React Three Fiber](https://varun.ca/modular-webgl/) — If you want to build neat 3D visualizations in the browser using the React concepts you’re already familiar with, here’s how to get started. A great intro. A stunning '[Solar Storm](https://solarstorm.netlify.app)' demo shows what is possible. Varun Vachhar [Remix: A Major New (Sort Of) Full Stack React-Based Framework for Web Apps](https://remix.run/) — Remix has been around for [over a year](https://dev.to/dabit3/a-first-look-at-remix-run-449a) as ‘sponsorware’ but after picking up a lot of ardent supporters and [$3m of seed funding](https://remix.run/blog/seed-funding-for-remix), the project has just been open sourced. Here’s [an introduction to building a Remix app](https://flaviocopes.com/remix/), and we plan to cover it more in the coming weeks. Remix Team [![\](https://copm.s3.amazonaws.com/c0d50a2b.png)](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=numberone) [ButterCMS Melts into Your React App. #1 Rated Headless CMS](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=numberone) — ButterCMS is your content backend. Enable your marketing team to update website + app content without needing you. Try the #1 rated Headless CMS for React today. Free for 30 days. ButterCMS sponsor [A Visual Guide to React Rendering: Refs](https://alexsidorenko.com/blog/react-render-refs/) — We return to the author’s well-regarded _Visual Guide to React Rendering_ series (_we've previously shared instalments on both [Props](https://react.statuscode.com/issues/251) and [useMemo](https://react.statuscode.com/issues/252)_). This time he turns his attention and animation skills to the nuances of rendering [refs](https://reactjs.org/docs/refs-and-the-dom.html). Alex Sidorenko **IN BRIEF:** - [React Redux v8 is now in beta.](https://github.com/reduxjs/react-redux/releases/tag/v8.0.0-beta.0) The entire codebase is now in TypeScript and React's `useSyncExternalStore` API is used for React 18 compatibility. - Vercel, the company behind Next.js, has [announced a $150m round of funding](https://vercel.com/blog/vercel-funding-series-d-and-valuation). Jobs [Senior Software Engineer](https://getjobber.com/careers/senior-software-engineer-5712264002/) — Want to change the lives of small businesses, using your experience to influence a product and our team, all the while still developing your own craft? Jobber [Senior Full Stack Engineer (Remote)](https://grnh.se/5505867f2us) — Invoca is looking for passionate developers to join our team. Help build something awesome with React, GraphQL and Ruby on Rails. Invoca [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 [An Introduction to Redux Toolkit for Beginners](https://lo-victoria.com/introduction-to-redux-toolkit-for-beginners) — [Redux Toolkit](https://redux-toolkit.js.org/) is a "batteries-included toolset for efficient Redux development." Victoria Lo ▶[Swizec Teller on the Senior Engineer Mindset](https://maintainable.fm/episodes/swizec-teller-sr-engineer-mindset) — We routinely feature Swizec’s articles — now, here’s an opportunity to hear him in conversation focused on his curated essays that make up his [Senior Mindset](https://seniormindset.com) series. The Maintainable Podcast podcast [Using Stream to Build a Team Messaging App](https://getstream.io/chat/docs/sdk/react/?utm_source=ReactStatus&utm_medium=newsletter_content_ad&utm_content=Developer&utm_campaign=ReactStatus_Nov2021_StreamChatOverview) Stream sponsor [Creating a React Component with TDD](https://dev.to/mbarzeev/creating-a-react-component-with-tdd-2jn8) — [TDD](https://en.wikipedia.org/wiki/Test-driven_development) doesn’t often get a lot of airtime in the React ecosystem, but this article counteracts that trend with the application of its principles in a full-cycle tutorial. Matti Bar-Zeev [Useful React Hooks That You Can Use in Your Projects](https://www.smashingmagazine.com/2021/11/useful-react-hooks/) Ifeanyi Dike [Add a Contact Form to a React App with Netlify Forms](https://www.sitepoint.com/react-app-contact-form-netlify-forms/) Taminoturoko Briggs 🛠 Code and Tools [React Image Crop: A Responsive Image Cropping Tool](https://github.com/DominicTobias/react-image-crop) — Responsive, touch-enabled, with no dependencies. Dominic Tobias [Resourcerer: Declarative Fetching and Caching of Data](https://github.com/noahgrant/resourcerer) — Consisting of a custom `useResources` hook and a `withReources` component, it provides for serialized requests, prioritization to optimize rendering and prefetching of data. All with zero dependencies and less than 10KB size. Noah Grant [React Native Accessibility Engine: Closing the Gap with React for the Web](https://npmjs.com/package/react-native-accessibility-engine) — With few tutorials on the best use of the [React Native’s Accessibility API](https://reactnative.dev/docs/accessibility) and coupled with a broad array of target devices, this project is squarely focused at creating mobile apps with better [accessibility](https://www.interaction-design.org/literature/topics/accessibility). Aryella Lacerda [use-prosemirror: Integration of the Capable Rich Text Editor](https://github.com/dminkovsky/use-prosemirror) — [ProseMirror](https://prosemirror.net) is a fully-featured editor that, while its still in its first major release, is already in use at sites like [PonyMessenger](https://www.ponymessenger.com). Try out the simple example on [CodeSandbox](https://codesandbox.io/s/use-prosemirror-basic-example-nie7f?file=/src/App.tsx). Dmitry Minkovsky ## ⚡️ Quick Bits: - [ReactPhoenix](https://github.com/geolessel/react-phoenix) — Render React components in Elixir's [Phoenix Framework](https://www.phoenixframework.org). - [toggle-switch-react-native](https://github.com/aminebenkeroum/toggle-switch-react-native) — A simple, iOS-like toggle switch with a variety of options. - [react-flag-kit](https://github.com/umidbekk/react-flag-kit) — Not flags as a metaphor for status indicator but rather what's flown from flagpoles. - [react-native-bootsplash](https://npmjs.com/package/react-native-bootsplash) — Show a bootsplash during app startup. - [React Linked In Login Using OAuth 2.0](https://npmjs.com/package/react-linkedin-login-oauth2) 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