--- title: "Four years of being hooked by React" publication: "React Status" issue: 316 published_at: "2022-11-30" canonical_url: "https://react.statuscode.com/issues/316" --- Plus bringing Unity to React apps, a grid gallery component, and using Zustand for state management. | #​316 — November 30, 2022 [Read on the Web](https://react.statuscode.com/issues/316) Together with [![Stytch logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_250,h_100/e_make_transparent/co_white,e_outline:7/ybmf19rrsbnymq3rn7n3.png)](https://stytch.com/?utm_source=react-status&utm_medium=paid_sponsorship&utm_campaign=react-status-primary-20221130) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/adx15oujbt2xxz54falj.jpg)](https://react-unity-webgl.dev/) [React Unity WebGL: Embed Unity WebGL Apps into React Apps](https://react-unity-webgl.dev/) — [Unity](https://unity.com/) is best known as a platform for building 3D games but can be used for broader applications too. _React Unity WebGL_ helps you integrate WebGL-powered Unity apps with React apps and communicate between the two. [GitHub repo](https://github.com/jeffreylanters/react-unity-webgl). Jeffrey Lanters [Working with Zustand](https://tkdodo.eu/blog/working-with-zustand) — Some tips for using [Zustand](https://zustand.surge.sh/), a relatively minimal state management library with a lot of enthusiastic users. TkDodo As an aside, Zustand's [homepage](https://zustand.surge.sh/) has one of the nicest (cutest?) parallax-style effects I've seen (and I usually dislike parallax effects!) [![\](https://copm.s3.amazonaws.com/72c49d3c.png)](https://stytch.com/?utm_source=react-status&utm_medium=paid_sponsorship&utm_campaign=react-status-primary-20221130) [Stytch Is Your All-In-One Platform for User Authentication](https://stytch.com/?utm_source=react-status&utm_medium=paid_sponsorship&utm_campaign=react-status-primary-20221130) — With our API and SDKs, you can quickly set up secure, low-friction authentication for better security, higher conversion rates, and a seamless end user experience. [Try us out today](https://stytch.com/?utm_source=react-status&utm_medium=paid_sponsorship&utm_campaign=react-status-primary-20221130%20). Stytch sponsor [Shopify’s Solution for Measuring React Native Rendering Times](https://shopify.engineering/measuring-react-native-rendering-times) — Learn more about how their open-source [react-native-performance](https://github.com/Shopify/react-native-performance) library works, how to get started, and why measuring performance is so important for them. Elvira Burchik (Shopify) [CSS Variables for React Devs](https://joshwcomeau.com/css/css-variables-for-react-devs/) — An updated piece, and a solid look at how to use CSS variables (custom properties) in your next project. Josh W Comeau **IN BRIEF:** - The core contributors to React Native held a summit in September and [this writeup](https://reactnative.dev/blog/2022/11/22/react-native-core-contributor-summit-2022) explains what they did, what they discussed, and some of where the RN ecosystem is headed. ([This GitHub discussion thread](https://github.com/react-native-community/discussions-and-proposals/discussions/546) on what React Native can do to improve is also quite illuminating.) - Ruben Casas [ponders React's future](https://www.infoxicator.com/is-react-going-anywhere), stories of people migrating away from React, and whether React will 'go away' in 10 years. This is a story as old as time and could apply to almost any technology. - 🪝 We were just reminded it's just over _4 years_ since [hooks were first introduced](https://reactjs.org/docs/hooks-intro.html). 👴🏻 [What Shopify Learnt from Open-Sourcing _FlashList_](https://shopify.engineering/what-we-learned-from-open-sourcing-flashlist) — What’s at stake when a successful business decides to open-source an important part of their platform? Shopify shares their experience opening up their [performance-optimized React Native list control](https://shopify.github.io/flash-list/). David Cortés (Shopify) Golden Oldie: [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. _(This dates from a year ago, but I encountered it again and remembered how cool it was!)_ Varun Vachhar [Quickly Integrate Location with Existing Platforms](https://radar.com/documentation?utm_campaign=pr_global_mult_all_tech_20221130-react-status_documentation_ru1&utm_medium=display&utm_source=cooperpress) Radar sponsor [Conditional Rendering with Type Safety and Exhaustive Checking](https://www.lloydatkinson.net/posts/2022/react-conditional-rendering-with-type-safety-and-exhaustive-checking/) Lloyd Atkinson 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/mbhxs8ihtqq5twrz1vhr.jpg)](https://github.com/prabhuignoto/react-visual-grid) [React Visual Grid: A Flexible Grid / Gallery Component](https://github.com/prabhuignoto/react-visual-grid) — A new, [feature rich](https://github.com/prabhuignoto/react-visual-grid#-features-) image grid, as illustrated with [this live demo](https://react-visual-grid.vercel.app). Prabhu Murthy [React Countup 6.4: Configurable Component Wrapper around CountUp.js](https://github.com/glennreyes/react-countup) — For situations where you want a numeric value to count up from one value to another (there’s a demo on [the homepage.](https://tr8tk.csb.app/)). Want the same thing _without_ React? [CountUp.js](https://inorganik.github.io/countUp.js/) is for you. Glenn Reyes [Dynaboard: The Pro-Code Web App Builder Made for Developers](https://dynaboard.com/?utm_source=cooperpress&utm_medium=email&utm_campaign=procode-q42022) Dynaboard sponsor [react-multi-email](https://github.com/axisj/react-multi-email) — Format multiple email addresses as the user types, as shown in their [demo](react-multi-email.vercel.app/). Tom at AXISJ - [Redwood 3.5](https://github.com/redwoodjs/redwood/releases/tag/v3.5.0) ↳ React + GraphQL app framework. v3.5 introduces service caching. - [Tremor 1.2](https://www.tremor.so/) ↳ Framework for building dashboards. - [React Tabs 6.0](https://reactcommunity.org/react-tabs/) ↳ Accessible tab component. - [React Leaflet 4.2](https://react-leaflet.js.org/) ↳ Components for Leaflet-rendered maps. - [React Cool Dimensions 3.0](https://github.com/wellyshen/react-cool-dimensions) ↳ Hook to measure an element's size and handle responsive components. - [React Uploady 1.3](https://github.com/rpldy/react-uploady) ↳ File uploading components and hooks. - [react-xr 5.1](https://github.com/pmndrs/react-xr) ↳ VR/AR experiences atop react-three-fiber. - [SWR 2.0 Release Candidate 3](https://github.com/vercel/swr) ↳ Hooks for data fetching. Jobs [Software Engineer](https://www.stickermule.com/career/6de4ccd8-7e58-4b65-9a25-62354972bdbd) — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers. Stickermule [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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/aucy3y7u5ryboxah7dxo.jpg)](https://louisbarranqueiro.github.io/reapop/) [Reapop 4.2: Simple, Customizable Notifications System](https://louisbarranqueiro.github.io/reapop/) — This project’s homepage is itself a giant, customizable demo of what Reapop can do. Keep clicking away on “Random notification” to fill your screen! Now supports React 18. [GitHub repo](https://github.com/LouisBarranqueiro/reapop). Louis Barranqueiro 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