Why React contexts are great, but..

Plus ReacType 13.0, graphql-react 20.0, and making your own live code editing experiences. |

#​303 — August 31, 2022 Read on the Web React Status Understanding 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) — 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 Get Started with Stream's Free Maker Account — Integrate activity feeds & chat messaging with help from Stream's APIs/SDKs, including React. Stream sponsor React Error Boundaries: A 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 also remain useful. QUICK BITS: On his podcast, Kent C Dodds ▶️ answers a question about the viability of migrating from a React and Ruby on Rails hybrid app to Remix. 💵 Over on Reddit, React developers discussed the salaries they're making 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, a Next.js powered low bandwidth news site. You can also quickly listen to all of their live radio stations. Jobs Senior Software Engineer at This Dot Labs (Remote, Worldwide) — 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 — 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 — 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 — Shopify's more efficient FlashList is a simple swap-out for React Native's 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 — A 17-minute walkthrough of creating a basic app with MUI providing the components. Tek E Using React Router for Modularization — A brief guide to nested routes. Moleseng Mokgosi Ten React Traps To Avoid Imran Farooq 🛠 Code and Tools Loading Disco: An Alternative to the Loading Spinner — 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. Joe Bell Create Rust App: Set Up a Modern Rust + React Web App in One Command — 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 New Relic sponsor ReacType 13.0: The React Prototyping Tool — ReacType 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 — 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 are good and show off an example. Yoav Niran Sandpack: Component Toolkit for Creating Your Own Live Running Code Editing Experience — Created by the folks at CodeSandbox, so they know what they're talking about. It has a really neat landing page, BTW. CodeSandbox Zhithead: A React and Framer Motion-Based Clone of a Ruder-Named Card Game — You can play the actual game here. 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 – Exposes platform native touch APIs. re-frame 1.3 – ClojureScript UI framework, leveraging React. react-xr 5.0 – VR/AR with react-three-fiber. graphql-react 20.0 – GraphQL client using context and hooks APIs. Reactist 15.0 – React component suite. (Examples.) Styled Components 6.0 Beta MUI 5.10.3

This issue was curated by Terence C. Gannon and edited by the Cooperpress team. A Cooperpress publication. Change your email address or Stop getting this newsletter © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom