---
title: "An alternative to useEffect"
publication: "React Status"
issue: 292
published_at: "2022-06-08"
canonical_url: "https://react.statuscode.com/issues/292"
---

Plus writing WebGL shaders in React, and what's happening with Gatsby. |        

#​292 — June 8, 2022 

[Read on the Web](https://react.statuscode.com/issues/292)   React Status  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/dzgmew9ue02yba5hl68a.jpg)](https://www.youtube.com/watch?v=HPoC-k7Rxwo)  

▶[Goodbye, `useEffect`? David Khourshid's Reactathon Talk](https://www.youtube.com/watch?v=HPoC-k7Rxwo) — Here, [Stately](https://stately.ai) founder David Khourshid makes the case for using event handlers and state machines to simplify handling effects in React apps rather than using `useEffect` which many developers struggle with and isn’t always well suited for the task anyway. 

David Khourshid   

[Building Interoperable Web Components That Even Work with React](https://css-tricks.com/building-interoperable-web-components-react/) — If you use different frameworks like React, Svelte, Vue, etc. it’s common to pick a component library that suits each one, but what if you could write such components once in a framework agnostic way and use them wherever you want? Web Components provides an approach. 

Adam Rackis   [![\](https://copm.s3.amazonaws.com/31104733.png)](https://getstream.io/blog/build-a-medical-pager-app/?utm_source=ReactStatus&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=ReactStatus_June2022_MedicalPagerApp) 

[Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API](https://getstream.io/blog/build-a-medical-pager-app/?utm_source=ReactStatus&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=ReactStatus_June2022_MedicalPagerApp) — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more. 

Stream sponsor   

[An Overview of Remix Conf 2022](https://crystallize.com/blog/remix-conf-2022) — A comprehensive, independently-prepared summary of the recently-concluded [Remix Conf 2022](https://remix.run/conf/2022) in Salt Lake City, Utah. 

Sébastien Morel   

[Plasmo: 'It's Like Next.js for Browser Extensions'](https://github.com/PlasmoHQ/plasmo) — A React and TypeScript oriented framework for building your own browser extensions complete with live-reloading, automated deployment to the main extensions marketplaces, and more. 

Plasmo   

**Quick bits:** 

- Patrick Sullivan of Gatsby [looks at some of the latest updates](https://www.gatsbyjs.com/blog/launch-week-the-latest-updates-to-gatsby-cloud-and-the-gatsby-framework/) to Gatsby Cloud and the framework itself.
- 🇳🇴 Er du i Norge? [React Norway](https://reactnorway.com/) takes place on June 24 in Larvik. There is a virtual ticket option if you can't make it in person though.    

Jobs  

[Senior React Engineer @ Nebulab (Remote)](http://nebulab.com/careers?gh_src=659d9832teu) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers. 
Nebulab   

[React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-react&utm_content=react) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. 
X-Team   

[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      

[How to Embed a React App in a Go Binary](https://www.smartinary.com/blog/how-to-embed-a-react-app-in-a-go-binary/) — [Go](https://golangweekly.com/) is a popular language for writing backend APIs and you can compile Go apps down to a single, easily shared binary. Could you put your _front end_ app in there too? Sure can. 

Nils Caspar   

[How To Create a 'Copy Code' Button Along with React-Markdown](https://designly.biz/blog/post/react-markdown-how-to-create-a-copy-code-button) — A novel combination of the [react-markdown](https://github.com/remarkjs/react-markdown) and [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) libraries to enable code to be quickly and easily copied with a single button click. 

Jay Simons (Designly Blog)   

[Stress Testing React 18’s Concurrent Features Using 3D Rendering](https://dawchihliou.github.io/articles/stress-testing-concurrent-features-in-react-18) — React 18 includes the highly anticipated [concurrent features](https://reactjs.org/blog/2022/03/29/react-v18.html#what-is-concurrent-react). This article describes how to incrementally optimize a sample 3D visualisation by employing this powerful new capability. 

Daw-Chih Liou   

[Should You Use Framer Motion or Motion One?](https://motion.dev/blog/should-you-use-framer-motion-or-motion-one) — The author of _both_ [Framer Motion](https://www.framer.com/motion/) and [Motion One](https://motion.dev) compares and contrasts the two JavaScript animation libraries. _Framer Motion_ is the way to go _if_ you’re using React, he says. 

Matt Perry   

[Reading Source Code: React-Query](https://alexkondov.com/reading-source-code-react-query/) — A tutorial which describes the author’s methodology for exploring and understanding an unfamiliar codebase. 

Alex Kondov  

🛠 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/hg46eha4ddaw1wlo2jdd.jpg)](https://github.com/karolkozer/planby)   

[Planby: A React Based Component to Implement an EPG-Like Timeline](https://github.com/karolkozer/planby) — Similar to the “electronic program guides” found on cable TV or streaming services. You can view some customizable [examples here](https://planby.netlify.app/). 

karol kozer   

[gl-react: Simplifying WebGL Shaders](https://github.com/gre/gl-react) — A library to write and compose [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) [shaders](https://thebookofshaders.com/01/), enabling the creation of complex, animated graphics effects. _Of course_, there [are examples.](https://gl-react-cookbook.surge.sh/hellogl) 

Gaëtan Renaudeau   

[Keep Up with the Latest in Startups, Tech, & Programming in Just 5 Min](https://tldr.tech/signup?utm_source=rs0608) 

TLDR Newsletter sponsor   

[Locofy: Convert Figma Designs into ‘Pixel Perfect’ React Code](https://www.locofy.ai/convert/figma-to-react) — A [well-funded](https://medium.com/january-capital/our-investment-in-locofy-ai-428f90aa98e2) crack at the holy grail of converting design documents (in [Figma](https://www.figma.com), in this case) directly into production-ready React code. 

Locofy   

[ReactiveMaps 3.0: UI Components for Building Geo Search UIs](https://blog.reactivesearch.io/reactivemaps-3-0-release-geo-search-uis) — The new release supports both OpenStreetMaps _and_ Google Maps and enables the creation of [rich search experiences](https://blog.reactivesearch.io/reactivemaps-3-0-release-geo-search-uis#heading-see-what-you-can-build-with-reactivemaps) for your choice of [Elasticsearch](https://www.elastic.co/elasticsearch/), [OpenSearch](https://opensearch.org) and [MongoDB Atlas Search](https://www.mongodb.com/docs/atlas/atlas-search/) backends. 

ReactiveSearch Blog    

## ⚡️ Quick Bits:   

[react-text-transition 2.0](https://github.com/WinterCore/react-text-transition) — Component to animate text changes.   

[react-pin-field](https://github.com/soywod/react-pin-field) — One of the commonly used elements of [MFA](https://en.wikipedia.org/wiki/Multi-factor_authentication), made easy.   

[react-chartjs-2 4.2](https://github.com/reactchartjs/react-chartjs-2) — React components for Chart.js.   

[Ruck](https://ruck.tech/) — Build-less React web app framework for Deno.           

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
