--- title: "React Query 2.0, taking urql offline, and keeping up with React" publication: "React Status" issue: 194 published_at: "2020-06-24" canonical_url: "https://react.statuscode.com/issues/194" --- ⚛️ This week's React news, links, and libraries #194 — June 24, 2020 [Read on the Web](https://react.statuscode.com/issues/194) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/vquyv6lpj9hbd2hqfmyu.jpg)](https://github.com/tannerlinsley/react-query/releases/tag/v2.0.0) [React Query 2.0: Hooks for Fetching, Caching and Updating Async Data](https://github.com/tannerlinsley/react-query/releases/tag/v2.0.0) — v1.0 only came out several months ago but 2.0 is here with better query invalidation and refetching, multi-instance polling and interval support, and a simplified dependent query syntax. _React Query_ is well worth checking out now and has extensive documentation and even [its own devtools.](https://github.com/tannerlinsley/react-query#react-query-devtools) [Main repo.](https://github.com/tannerlinsley/react-query) Tanner Linsley [Formidable Labs Builds Out urql's Offline Support Capabilities](https://formidable.com/open-source/urql/docs/graphcache/offline/) — Formidable’s [urql](https://github.com/FormidableLabs/urql) is burnishing its reputation as a versatile, highly customizable [GraphQL](https://graphql.org) client, but did you know it also has robust **offline** support? This newly released documentation systematically walks you through normalised caching, optimistic updates & resolvers and offline persistence. Formidable Labs [![\](https://copm.s3.amazonaws.com/4beac041.png)](https://tsh.io/state-of-frontend/?utm_source=newsletter&utm_medium=mailing&utm_campaign=sofe_survey&utm_content=reactstatusprimary) [State of Frontend 2020: Take Part in the Survey](https://tsh.io/state-of-frontend/?utm_source=newsletter&utm_medium=mailing&utm_campaign=sofe_survey&utm_content=reactstatusprimary) — What does the everyday job of a frontend developer look like? 🤔 Which frameworks and tools do you really use? Which would you like to use but your employer won’t let you? Let’s discover the real State of Frontend 2020 together. The Software House sponsor [When is React Not React? When It's 'Noact'](https://github.com/ms-jpq/noact) — When React is your hammer, every problem out there is going to look like a nail. But there are situations where it’s **not** the right tool for the job. There may be better alternatives. For example, Noact incorporates React-like principles into something much simpler (only 60 lines of code, even). It could be a good place to learn first principles before venturing into full-blown React. Hao Wang ▶[Mina Markham with Thoughts on How To Learn React](https://www.smashingmagazine.com/2020/06/smashing-podcast-episode-18/) — Drew McLellan talks with Mina Markham about the challenges of an experienced front-end engineer learning React. It's a fascinating and suprisingly candid conversation with a multi-talented individual known for her talks and work with organizations like [Black Girls Code](http://blackgirlscode.com/) and _Girl Develop It._ Smashing Podcast podcast 💻 Jobs [React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=react) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere. X-Team [Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77585) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. Vettery ℹ️ _Interested in running a job listing in React Status? There's [more info here.](https://booking.cooperpress.com/jobs)_ 📘 Tutorials and Stories [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1592998017/sbgmnb34y73eaouu69cf.png)](https://dev.to/flagrede/how-to-replicate-the-zelda-botw-interface-with-react-tailwind-and-framer-motion-part-1-298g) [How to Replicate the Zelda BOTW Interface with React, Tailwind and Framer Motion](https://dev.to/flagrede/how-to-replicate-the-zelda-botw-interface-with-react-tailwind-and-framer-motion-part-1-298g) — Now we're talking — if you have ever felt compelled to finally embrace your inner game dev, this is the tutorial for you. The first of a multi-part series on creating your own version of [Zelda: Breath of the Wild](https://www.zelda.com/breath-of-the-wild/) using the same tools you use for all that other 9-to-5 stuff (React, [Framer Motion](https://www.framer.com/motion/), [Tailwind](https://tailwindcss.com)). Florent Lagrede [Sharing React Components Between a Web & Electron App](https://blog.bitsrc.io/sharing-react-components-between-a-web-app-and-an-electron-desktop-app-dc0ae9c97205) — In yet another effort to increase the return on the time invested in building robust React components, here's how to further increase their utility by making them available to an [Electron](https://www.electronjs.org) desktop app using [Bit](https://bit.dev): "_the platform for collaboration on atomic components_". Nathan Sebhastian [Let’s Build a Financial Dashboard App With React in 3 Steps (Tutorial)](https://www.telerik.com/blogs/lets-build-a-financial-dashboard-with-react?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-fin-dash&utm_content=sponsored-link) — Check out this blog by TJ VanToll to learn a few techniques that make building dashboards easier. Progress KendoReact sponsor [How to Set Up a React Native Project Using Expo CLI](https://medium.com/react-native-for-beginners/how-to-set-up-react-native-project-using-expo-cli-ae950d075f07) — [Expo](https://expo.io) enables developers to take a shared JavaScript/TypeScript codebase and deploy it across a broad range of mobile devices and web apps. This tutorial methodically walks through the steps required to set up React Native project using this approach. Reshaka Weerasinghe [Better Reducers With Immer](https://www.smashingmagazine.com/2020/06/better-reducers-with-immer/) — If writing [reducers](https://www.robinwieruch.de/javascript-reducer) by hand has left your code with a lot of bloat, you may want to relieve the tedium and potential for errors through the use of the lightweight [Immer](https://github.com/immerjs/immer) library to simply the process. Chidi Orji [A Deep Dive Into the React Context API](https://blog.logrocket.com/a-deep-dive-into-react-context-api/) — While your new application may start off with the noble goal of creating just a single component, almost inevitably there comes a time when it must be broken down into simpler building blocks. But that begets the problem of maintaining state which has its own complexities. Here are the fine details of how to simplify state management with the [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) hook. Adebiyi Adedotun [Ways to Create Components in React](https://medium.com/@ankitbansal1412/ways-to-create-components-in-reactjs-f9c585953ebf) — We can always relate to any sort of analogy that involves LEGO. Components are like LEGO blocks. Now it all makes sense. That said, just as not all LEGO blocks are created equal, neither are components. Here’s a clear, concise differentiation between Class and Functional components in React. Ankit Bansal [Sorry React, But I Can’t Keep Up Anymore](https://medium.com/swlh/sorry-react-but-i-cant-keep-up-anymore-6b6c8415708c) — Simply keeping up with the React ecosystem sometimes seems like a full-time job in itself. With refreshing candor, the author self-diagnoses ‘JavaScript Fatigue Syndrome’ and resolves to time-box his commitment. Chris Vibert 🔧 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/o2rh6zalve3hhvcb28ss.jpg)](https://zander.wtf/blog/code-notes-release) [Code Notes: A Gatsby Theme for Publishing Code-Related Notes and Snippets](https://zander.wtf/blog/code-notes-release) — If you’ve got a bunch of code snippets you want to keep collected together and present in an attractive fashion, this is a neat Gatsby and Markdown/MDX powered approach. Here’s [an example site](https://notes.zander.wtf/) (which has lots of [React snippets](https://notes.zander.wtf/tag/react) on it – bonus) Zander Martineau [Beautiful React Hooks: A Collection of Custom React Hooks](https://github.com/beautifulinteractions/beautiful-react-hooks) — [Beautiful Interactions](https://beautifulinteractions.com) has been building up its library of custom React hooks for some time. It will speed and simplify your development by enabling the abstraction of components’ business logic. Beautiful Interactions [Dokz: Build Documentation Sites with MDX](https://dokz.site/) — Create documentation with live-reload and based on Next.js, and you can import React components in MDX. See [their docs](https://dokz.site/docs) for an example. Tommaso De Rossi [Serverless Headless CMS Powered by Node and React with a GraphQL API](https://www.webiny.com/serverless-app/headless-cms) Webiny sponsor [React Lazy Load Image Component: Jumpstart Your App's Peformance](https://github.com/Aljullu/react-lazy-load-image-component) — [Lazy loading](https://en.wikipedia.org/wiki/Lazy_loading) has the potential to dramatically improve the perception of your app's performance. However, it can be complicated to implement. This libary takes care of the details and makes it much easier. [Live demo here.](https://www.albertjuhe.com/react-lazy-load-image-component/) Albert Juhé Lluveras [React Native Share 3.5: A Simple Tool for Sharing Messages/Files with Other Apps](https://github.com/react-native-community/react-native-share) — Rather than build redundant functionality within your own app, why not concentrate on its core functionality and then share messages and files with complementary apps on the same device? React Native Community [React Bootstrap Typeahead: Inspired by and Improving On Twitter's typeahead.js](https://github.com/ericgio/react-bootstrap-typeahead) — This library improves on [typeahead.js](https://twitter.github.io/typeahead.js/) in that it is compliant with the increasingly important [WAI-ARIA](https://en.wikipedia.org/wiki/WAI-ARIA) authoring practices intended to increase the accessibility of web pages for all. Eric Giovanola 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