# This Week In React #134: Gatsby ️ Netlify, React DOM for Native, XState, Flashlight, re-renders, Custom Hooks... --- Hi everyone! Gatsby has just been acquired by Netlify 🤯! There is also a very interesting RFC to read if you are passionate about cross-platform in React-Native. Otherwise, it's a pretty quiet week. That's good timing, because I don't have much time 😄. I'm finishing up some preparations for next week's email which will be a bit different. --- 💡 Subscribe to the [official newsletter](https://thisweekinreact.com?utm_source=dev_crosspost) to receive an email every week! [![banner](https://thisweekinreact.com/img/TWIR_POST.png align="left")](https://thisweekinreact.com?utm_source=dev_crosspost) --- ## 💸 Sponsor [![refine](https://thisweekinreact.com/emails/issues/132/refine.png align="left")](https://github.com/refinedev/refine) [**refine - 100% open-source, headless React framework for building CRUD apps**](https://github.com/refinedev/refine) Get ready to take your skillset to the next level! We are thrilled to launch an Open Source refine Hackathon You can win $1500 and special swag kits! We are excited to collaborate with Strapi, Appwrite, Meilisearch, and Medusa. They are sponsoring the refine Hackathon and the winners will get a swag kit from each of them! [More information about the Hackathon](https://s.refine.dev/hackathon). --- ## ⚛️ React [![Netlify Acquires Gatsby Inc. to Accelerate Adoption of Composable Web Architectures](https://thisweekinreact.com/emails/issues/134/netlify-gatsby.jpg align="left")](https://www.netlify.com/press/netlify-acquires-gatsby-inc-to-accelerate-adoption-of-composable-web-architectures/) [**Netlify Acquires Gatsby Inc. to Accelerate Adoption of Composable Web Architectures**](https://www.netlify.com/press/netlify-acquires-gatsby-inc-to-accelerate-adoption-of-composable-web-architectures/) This is the big news of the week. Gatsby Inc. bought by Netlify. The framework is now under the Netlify umbrella alongside Eleventy and SolidJS and will continue to evolve. The cloud features (including the [Valhalla Content Hub](https://www.gatsbyjs.com/products/valhalla-content-hub/)) will be integrated into Netlify's offerings. The new slogan is "composable architecture". Gatsby is not the most popular React framework right now, but I think this acquisition makes sense, especially for the content hub and all the CMS integrations they have been working on. The Gatsby Cloud offering is harder to adopt than an optional paid features on Netlify, and that's even more true for sites that don't use Gatsby as a framework. Also check: * 📜 [Gatsby is joining Netlify](https://www.gatsbyjs.com/blog/gatsby-is-joining-netlify/) * 📜 [Netlify Acquires Gatsby, Its Struggling Jamstack Competitor](https://thenewstack.io/netlify-acquires-gatsby-its-struggling-jamstack-competitor/) * 🎥 [Why would anyone buy Gatsby?](https://www.youtube.com/watch?v=5HE6FcOpit8) --- [![Making state machines global in React](https://thisweekinreact.com/emails/issues/134/xstate.jpg align="left")](https://stately.ai/blog/making-state-machines-global-in-react) [**Making state machines global in React**](https://stately.ai/blog/making-state-machines-global-in-react) Presentation of the new `createActorContext` API appearing in XState 3.1. It allows to facilitate the creation of global XState state machines, associated to a React context. It is possible to use a selector system, or to provide a custom state machine to the provider (this looks convenient to customize a machine from parent `props`). --- * 📜 [React recursively re-renders child components, but there is a nuance](https://alexsidorenko.com/blog/react-render-children-prop/): nice visual article that illustrates how component splitting and state colocation can avoid unnecessary re-rendering. * 📜 [Custom React Hooks and When to Use Them](https://thoughtbot.com/blog/custom-react-hooks): sometimes you have to create custom hooks, even if they are not intended to be reused. But be careful: unnecessary abstractions also have a cost. * 📜 [TypeScript Utility Types You Need To Know](https://www.builder.io/blog/utility-types): presents in particular `Awaited` and `ReturnType`, but also `Readonly` in a React context. * 📜 [React JS Best Practices From The New Docs](https://sebastiancarlos.com/react-js-best-practices-from-the-new-docs-1c65570e785d): Interesting reading for those who want to have an overview of the content of the new doc. I don't agree with all the comments, in particular don't miss the [underrated useSyncExternalStore](https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api) 😄. * 📜 [WebStorm announces official support for Astro](https://astro.build/blog/astro-webstorm-support/) * 📜 [Demystifying UI Frameworks and Theming for React Apps](https://www.velotio.com/engineering-blog/demystifying-ui-frameworks-and-theming-for-react-apps) * 🎥 [Using Svelte Inside A React App](https://www.youtube.com/watch?v=FrusJNycQvk) * 👀 [Shopify.com](http://Shopify.com) [using Remix](https://twitter.com/remix_run/status/1622666016135475200) * 👀 [`create-astro` CLI redesign](https://twitter.com/n_moore/status/1621524815550074880) * 📦 [Ionic 7 Beta](https://ionic.io/blog/announcing-the-ionic-7-beta) * 📦 [Netlify/Remix-Compute](https://github.com/netlify/remix-compute): Remix + Netlify adapter --- ## 💸 Sponsor [![Build and Run Synthetic Monitoring That Scales](https://thisweekinreact.com/emails/issues/134/checkly.jpg align="left")](https://www.checklyhq.com/?utm_medium=email&utm_source=newsletter&utm_campaign=this-week-in-react-february) [**Build and Run Synthetic Monitoring That Scales**](https://www.checklyhq.com/?utm_medium=email&utm_source=newsletter&utm_campaign=this-week-in-react-february) [**Checkly**](https://www.checklyhq.com/?utm_medium=email&utm_source=newsletter&utm_campaign=this-week-in-react-february) lets you easily deploy Playwright scripts to monitor apps, websites and APIs, from Dev to Production. Validate crucial user flows, collect error traces, capture screenshots and record performance metrics to understand how your app performs for users across the globe! Use [Checkly](https://www.checklyhq.com/?utm_medium=email&utm_source=newsletter&utm_campaign=this-week-in-react-february) to: * ✅ Run programmable API and Browser checks to validate app performance * ✅ Get alerts when checks are failing, and easily integrate Checkly with your existing tech stack * ✅ Leverage Playwright and Javascript to maximize your monitoring and testing efforts [Start monitoring your apps for free](https://www.checklyhq.com/?utm_medium=email&utm_source=newsletter&utm_campaign=this-week-in-react-february) --- ## 📱 React-Native [![React DOM for Native (reduce API fragmentation)](https://thisweekinreact.com/emails/issues/134/rn-web.jpg align="left")](https://github.com/necolas/discussions-and-proposals/blob/reduce-fragmentation/proposals/0000-reduce-fragmentation.md) [**React DOM for Native (reduce API fragmentation)**](https://github.com/necolas/discussions-and-proposals/blob/reduce-fragmentation/proposals/0000-reduce-fragmentation.md) The [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/496) by Nicolas Gallagher (Meta / React-Native-Web) has just been updated. The goal is to align React-Native APIs as much as possible with Web APIs, including DOM elements like `div`, `span` and even `select`! The "learn once, run everywhere" could gradually turn into "write once, run everywhere". The community is quite divided. We'll have to sleep on it a bit know if it's a good idea 😄, and considering the size of this ambitious project, it's clearly not for tomorrow! --- * 📜 [How to swap between React Native Storybook and your app](https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o): useful technique for those who have a React-Native Storybook. Personally I like to have a menu bar in dev with buttons to open/close the Storybook, change the API environment or other... It saves a lot of time in the long run to create your own DX. * 📦 [Flashlight.dev](http://Flashlight.dev): Flashlight is a new service that wants to become the Lighthouse of mobile, including a convenient Flashlight Cloud offering. Project formerly named [Android-Performance-Profiler](https://twitter.com/almouro/status/1622588283740880897). * 📖 [Ignite Cookbook for React Native](https://ignitecookbook.com/): short step-by-step recipes for React-Native. * 🎨 [SolidJS + NativeScript demo running React-Native-WebView](https://twitter.com/ammarahm_ed/status/1622259723729764354): the promise of Open Native in action, is interesting for the portability of native code. * 👀 [The White House calls for more interoperability between mobile platforms](https://twitter.com/JI/status/1620948253381632000) * 🎙️ [React-Native-Radio 258 - AI Robots coding React Native?!](https://reactnativeradio.com/episodes/r258-robots-coding-react-native) --- ## 🧑‍💻 Jobs 🧑‍💼 [**Passionfroot - Senior Full-stack Engineer (Remix) - €160k+, Berlin/remote**](https://passionfroot.recruitee.com/o/senior-fullstack-engineer) Passionfroot's mission is to empower the independent businesses of tomorrow via YouTube, Podcasts, Social Media, and Newsletters. Join us in building a tool that will empower creators globally to build scalable, sustainable businesses. 🧑‍💼 [**Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly**](https://www.callstack.com/senior-react-native-developer) Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got! 🧑‍💼 [**G2i - 100% Remote React Native Jobs**](https://twitter.com/gabe_g2i/status/1563204813881425926?s=20&t=ArRLC77BpRwXXCdx8fnUqw) We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM [@gabe\_g2i](https://twitter.com/gabe_g2i) to learn more and don't forget to mention This Week in React. 💡 [How to publish an offer?](https://thisweekinreact.com/sponsor) --- ## 🔀 Other * [Updates from the 94th TC39 meeting](https://dev.to/hemanth/updates-from-the-94th-tc39-meeting-48mb): finalized list of proposals that are going to the next stage. Especially excited about [AsyncContext](https://twitter.com/sebastienlorber/status/1620391460679065601), Change array by Copy and Symbols as WeakMap keys (much needed for [Records & Tuples](https://sebastienlorber.com/records-and-tuples-for-react)). * [Deno - The Future (and the Past) of the Web is Server Side Rendering](https://deno.com/blog/the-future-and-past-is-server-side-rendering) * [WebKit - Pushing Interop Forward in 2023](https://webkit.org/blog/13706/interop-2023/) + [Chrome - Interop 2023: continuing to improve the web for developers](https://web.dev/interop-2023/) * [Understanding monomorphism can improve your JavaScript performance 60x](https://twitter.com/mhevery/status/1622499229813047296) * [Speeding up the JavaScript ecosystem - eslint](https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-3/) * [Google is working on bringing Chromium to iOS](https://twitter.com/OpenWebAdvocacy/status/1621653519274246144) + [Mozilla is working on bringing Firefox to iOS](https://twitter.com/OpenWebAdvocacy/status/1622898924775415808) * [The Guide To Responsive Design In 2023 and Beyond](https://ishadeed.com/article/responsive-design/) * [A Business Case for SvelteKit](https://elliscs.hashnode.dev/a-business-case-for-sveltekit) * [Node.js 19.6](https://twitter.com/ruyadorno/status/1621186886470361093) * [Ada 1.0 - New Node.js URL parser](https://twitter.com/nodejs/status/1622707746716917761) * [Vite 4.1](https://twitter.com/vite_js/status/1621149774627094535) * [Don't use return types, unless...](https://www.youtube.com/watch?v=nwSe95uFN8E) * [The Dangers Of Return Types in TypeScript](https://www.youtube.com/watch?v=I6V2FkW1ozQ) * [Learn Images - In-depth course on images for the web](https://web.dev/learn/images/) * [Forking Chrome to render in a terminal](https://fathy.fr/carbonyl) --- ## 🤭 Fun Savage 😅 why is he so mean! [![alt](https://thisweekinreact.com/emails/issues/134/meme.png align="left")](https://twitter.com/ThePrimeagen/status/1620827474681827333) See ya! 👋