--- title: "Introducing Relay Hooks" publication: "React Status" issue: 230 published_at: "2021-03-17" canonical_url: "https://react.statuscode.com/issues/230" --- Plus how does Svelte stack up against React? | #230 — March 17, 2021 [Read on the Web](https://react.statuscode.com/issues/230) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1615976904/epbluof3h5sw6n0ilmcc.jpg)](https://relay.dev/blog/2021/03/09/introducing-relay-hooks/) [Introducing Relay Hooks with Relay 11.0](https://relay.dev/blog/2021/03/09/introducing-relay-hooks/) — Use hooks to fetch and manage [GraphQL](https://graphql.org) data with the most developer-friendly version of [Relay](https://relay.dev) yet. Relay is a framework from Facebook for building data-driven React applications in a particularly declarative way. Robert Balicki and Juan Tejada [Comparing Svelte and React](https://www.jackfranklin.co.uk/blog/comparing-svelte-and-react-javascript/) — After spending an extended period of time working with both, the author identifies his preference based on first hand observations supported with real-world examples. Jack Franklin [![\](https://copm.s3.amazonaws.com/104b0b9d.png)](https://bit.ly/381pzun) [React Native: How To Build Bidirectional Infinite Scroll](https://bit.ly/381pzun) — Learn how to implement a smooth bidirectional infinite scroll in React Native. Stream sponsor [Add Voice Recognition to React Native without Adding the Cloud](https://t.co/TDqGZQ1Hfo?amp=1) — Quick and easy voice recognition often depends on a cloud service for implementation. However there a lots of good reasons—security, for example—why you don’t want to do it that way. Ian Lavery [Integrating Google Maps in React](https://sudolabs.io/blog/integrating-google-maps-in-react) — A thorough review of just about everything you need to know to incorporate a feature-rich mapping experience which many users simply expect these days. Pavlo Chabanenko [React Clean Code Recommendations](https://t.co/BqCHQzWTGp?amp=1) — Eight well thought out recommendations complete with code examples first showing how not to do it, followed by a new and improved version. Tyler Hawkins 💻 Jobs [React Native Engineer (Remote)](https://boards.greenhouse.io/companycam/jobs/4391835003) — Looking for devs with a passion for building mobile apps. No sprinting, no scrumming, work normal hours. CompanyCam [Find Your Next Job Through 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 📘 Tutorials and Stories [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/zoeyznwet3g4evnxlqem.jpg)](https://youtu.be/RYv-CgDJOi8) ▶[How to Make It 'Rain' with CSS Animation, React, & Styled Components](https://youtu.be/RYv-CgDJOi8) — Although it’s not everyone’s cup of tea, if you want to implement the trendy ‘rain’ effect for your website, this PG-13 video goes through the steps in an entertaining and logical way. Our favorite React YouTuber right now. Chris Power [Creating an Outside Focus and Click Handler React Component](https://www.smashingmagazine.com/2021/03/outside-focus-click-handler-react-component/) — This tutorial recreates the [react-foco](https://github.com/nanot1m/react-foco) component as the means of teaching these important UI concepts. Arihant Verma [How I Improved My React Native App by Making It 50x Faster](https://t.co/BlElDFu878?amp=1) — Five specific recommendations for improvements that when taken together, add up to a dramatic improvement in app performance. Takuya Matsuyama [An Engineering Leader’s Guide to OpenTelemetry](https://go.lightstep.com/register-engineering-leaders-guide-to-opentelemetry-co21.html?utm_campaign=react&utm_source=cooper&utm_medium=Email) Lightstep sponsor [Lazy Loading React Native Components from a Server](https://sarathkcm.me/blog/lazy-loading-react-native-components-from-a-server) — This is an innovative way of updating the content of your app without going through a dreaded app store update. Sarath Kumar CM [The Complete Guide to `useRef()` and Refs in React](https://dmitripavlutin.com/react-useref-guide/) — If you’ve found the official documentation for the [useRef Hook](https://reactjs.org/docs/hooks-reference.html#useref) a little terse, here is the missing manual for which you’ve been waiting. Dmitri Pavlutin 🛠 Code and Tools [react-ssr-prepass: A Partial Server-Side React Renderer](https://github.com/FormidableLabs/react-ssr-prepass) — By using a prepass and pausing until thrown promises are resolved, this library offers a practical way to use [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) when implementing complex fetching logic. Formidable [react-avatar 1.0: A Load, Crop and Preview Component](https://github.com/kirill3333/react-avatar) — Here’s another detail which tends to get skipped once a deadline crunch looms. Let this fully-featured component take care of it for you. Kirill Novikov [A Better Way to Build Internal Tools](https://retool.com/?ref=cooperpress) — Build internal apps without the mundane, boring bits (wrestling with UI libraries or hacking together data sources & APIs). Retool sponsor [next-sitemap: Simple Sitemap Generation for Next.js](https://github.com/iamvishnusankar/next-sitemap) — Sitemaps quite often get skipped because they can be labour intensive to implement and maintain. Now you can automate the process. Vishnu Sankar [Embla Carousel: Fluid Motion and Swipe Precision](https://github.com/davidcetinkaya/embla-carousel) — Comes complete with the most comprehensive [set of examples](https://www.embla-carousel.com/examples) I've seen in a while. David Cetinkaya [react-three-a11y: Accessibility for WebGL](https://github.com/pmndrs/react-three-a11y) — A set of [react-three-fiber](https://github.com/pmndrs/react-three-fiber) components to address the requirements of an accessible user experience. Poimandres **⚡️ Quick Bits:** Interesting projects which you may have missed: - [next-dark-mode](https://github.com/xeoneux/next-dark-mode) — Drop in dark mode for Next.js. - [react-daterange-picker](https://github.com/wojtekmaj/react-daterange-picker) — Simple and lightweight date ranges. - [react-glider](https://github.com/hipstersmoothie/react-glider) — Wraps the popular [glider.js](https://github.com/NickPiscitelli/Glider.js/) carousel library. - [react-native-input-spinner](https://github.com/marcocesarato/react-native-input-spinner) — A highly configurable component for this popular UI element. - [react-native-confetti-cannon](https://github.com/VincentCATILLON/react-native-confetti-cannon) — Need we say more? There's an animated GIF showing off the effect ;-) 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