--- title: "Why React contexts are great, but.." publication: "React Status" issue: 303 published_at: "2022-08-31" canonical_url: "https://react.statuscode.com/issues/303" --- Plus ReacType 13.0, graphql-react 20.0, and making your own live code editing experiences. | #​303 — August 31, 2022 [Read on the Web](https://react.statuscode.com/issues/303) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/rfyta9jqdby7hu85qpxc.jpg)](https://www.joshwcomeau.com/react/usememo-and-usecallback/) [Understanding `useMemo` and `useCallback`](https://www.joshwcomeau.com/react/usememo-and-usecallback/) — Many find these hooks confusing. This tutorial takes a crack at what they do exactly, why they’re useful and how to get the most out of them – and all in Josh’s usual highly accessible and engaging style. Josh W. Comeau [Why React Contexts Are Great (and Why We _Didn't_ Use Them)](https://spin.atomicobject.com/2022/08/24/react-contexts/) — Something can be good, but also not a great fit for every project. Allen explains where his team ran into problems with `useContext`. Allen Janyska [![\](https://copm.s3.amazonaws.com/6daee03b.png)](https://getstream.io/maker-account/?utm_source=React_Status&utm_medium=Promoted_Newsletter&utm_content=Developer&utm_campaign=ReactStatus_August2022_MakerAccount_klmh22) [Get Started with Stream's Free Maker Account](https://getstream.io/maker-account/?utm_source=React_Status&utm_medium=Promoted_Newsletter&utm_content=Developer&utm_campaign=ReactStatus_August2022_MakerAccount_klmh22) — Integrate activity feeds & chat messaging with help from Stream’s APIs/SDKs, including React. Stream sponsor [React Error Boundaries: A Guide](https://meticulous.ai/blog/react-error-boundaries-complete-guide/) — Not properly catching errors thrown by third-party libraries or React hooks can have them end up reaching the top-level of the main execution thread, resulting in the dreaded “white screen” scenario. The [official docs on error boundaries](https://reactjs.org/docs/error-boundaries.html) also remain useful. **QUICK BITS:** - On his podcast, Kent C Dodds [▶️ answers a question](https://kentcdodds.com/calls/01/91/migration-from-react-rails-hybrid-to-remix) about the viability of migrating from a React and Ruby on Rails hybrid app to [Remix](https://remix.run/). - 💵 Over on Reddit, React developers [discussed the salaries they're making](https://www.reddit.com/r/reactjs/comments/x19ijk/react_devs_from_3rd_world_countries_working_for/) working for American or European companies while living in countries with lower costs of living. - 🇨🇦 Canada's main public broadcaster, CBC, has a site called [CBC Lite](https://www.cbc.ca/lite/news?sort=editors-picks), a Next.js powered low bandwidth news site. You can also quickly listen to [all of their live radio stations](https://www.cbc.ca/lite/radio/live-radio). Jobs [Senior Software Engineer at This Dot Labs (Remote, Worldwide)](https://www.thisdot.co/job/senior-software-engineer-javascript-remote) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more. This Dot Labs [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 [When to Use useLayoutEffect Instead of useEffect](https://javascript.plainenglish.io/react-hooks-when-to-use-uselayouteffect-instead-of-useeffect-3271a96d881a) — Do you have an annoying flicker in your UI? It may be you’re using the wrong one of these two hooks: it’s all about whether the hook fires before or after the browser paints. Jakub Kozak [Instant Performance Upgrade: From FlatList to FlashList](https://shopify.engineering/instant-performance-upgrade-flatlist-flashlist) — Shopify’s more efficient [FlashList](https://shopify.github.io/flash-list/) is a simple swap-out for React Native’s [FlatList](https://reactnative.dev/docs/flatlist) and has the potential to make your list-intensive app really sparkle. Marek Fořt (Shopify Mobile Engineering) ▶[How to Get Started with React and MUI](https://www.youtube.com/watch?v=BlNbYxiyeQM) — A 17-minute walkthrough of creating a basic app with [MUI](https://mui.com/) providing the components. Tek E [Using React Router for Modularization](https://betterprogramming.pub/using-react-router-for-modularization-872b32315a3b) — A brief guide to nested routes. Moleseng Mokgosi [Ten React Traps To Avoid](https://medium.com/@imranfarooq0306/10-react-traps-to-avoid-as-react-developer-5570808e346b) Imran Farooq 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/t6ohjbfs3sa6sgyfnixt.jpg)](https://joebell.co.uk/sketches/loading-disco) [Loading Disco: An Alternative to the Loading Spinner](https://joebell.co.uk/sketches/loading-disco) — Neat demo, though more subtle and less disco-y than I was expecting (perhaps to your relief) :-) Joe has used a neat technique and he invites you to _“copy, remix and improve to your heart’s content.”_ [GitHub repo](https://github.com/joe-bell/loading-disco). Joe Bell [Create Rust App: Set Up a Modern Rust + React Web App in One Command](https://github.com/Wulf/create-rust-app) — A CRA-esque experience if you’d prefer to build your app’s backend in Rust. It uses Vite and has just added SQLite support. Haris Khan et al. [Work with APIs? Get Better API Observability in Minutes](https://newrelic.com/blog/nerdlog/postman-integration?utm_source=react-status&utm_medium=community&utm_campaign=global-fy23-q2-postman&utm_content=blog) New Relic sponsor [ReacType 13.0: The React Prototyping Tool](https://medium.com/@darin.ngau/reactype13-b4e23fc38d76) — [ReacType](https://reactype.io/) is an Electron app for prototyping React apps with a drag-and-drop canvas, preview rendering, and a tree graph to visualize app structure. v13 overhauls how state is managed. Darin Ngau [React-Uploady 1.1: File Upload Components and Hooks](https://react-uploady.org/) — Aims to be simple but customizable. You get a file upload button, a preview, a zone for drag and drop uploads, and more. The [docs](https://react-uploady.org/docs/) are good and show off an example. Yoav Niran [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/px4jfeeavfbemalgxw01.jpg)](https://github.com/codesandbox/sandpack) [Sandpack: Component Toolkit for Creating Your Own Live Running Code Editing Experience](https://github.com/codesandbox/sandpack) — Created by the folks at CodeSandbox, so they know what they’re talking about. It has [a really neat landing page](https://sandpack.codesandbox.io/), BTW. CodeSandbox [Zhithead: A React and Framer Motion-Based Clone of a Ruder-Named Card Game](https://github.com/aod/zhithead) — You can [play the actual game here.](https://zhithead.yatko.dev/) I’m not familiar with the original game myself, but it’s a slick experience. Oktay **⚡️ THE RAPID RELEASES ROUND** [React Native Gesture Handler 2.6](https://github.com/software-mansion/react-native-gesture-handler) – Exposes platform native touch APIs. [re-frame 1.3](https://github.com/day8/re-frame) – ClojureScript UI framework, leveraging React. [react-xr 5.0](https://github.com/pmndrs/react-xr) – VR/AR with react-three-fiber. [graphql-react 20.0](https://github.com/jaydenseric/graphql-react) – GraphQL client using context and hooks APIs. [Reactist 15.0](https://github.com/Doist/reactist) – React component suite. ([Examples.](https://doist.github.io/reactist/)) [Styled Components 6.0 Beta](https://github.com/styled-components/styled-components/releases/tag/v6.0.0-beta.0) [MUI 5.10.3](https://github.com/mui/material-ui) 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