--- title: "React Hook Form 6.0 released" publication: "React Status" issue: 195 published_at: "2020-07-01" canonical_url: "https://react.statuscode.com/issues/195" --- ⚛️ This week's React news, links, and libraries #195 — July 1, 2020 [Read on the Web](https://react.statuscode.com/issues/195) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/op9kf0idptxsqqyyzygh.jpg)](https://react-hook-form.com/) [React Hook Form 6.0: Simple, Extensible React Form Validation](https://react-hook-form.com/) — Now with better TypeScript support, a smaller package size, and numerous refinements and improvements, RHF is certainly worth a look if you’re building or refactoring forms. [GitHub repo](https://github.com/react-hook-form/react-hook-form). Blue Bill [An In-Depth Beginner's Guide to Testing React Apps](https://jkettmann.com/beginners-guide-to-testing-react/) — A lot of posts will say ‘in-depth’ and be 500 words long – this isn’t one of those! If you’re a beginner to testing, there’s a lot to chew on here but it stays accessible throughout. Johannes Kettmann [![\](https://copm.s3.amazonaws.com/78ea9f9f.png)](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=canyouupdateoursite) [Ever Hear 'Can You Update Our Website Real Quick?'](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=canyouupdateoursite) — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days. BUTTERCMS sponsor [Create a React Teleprompter using the Web SpeechRecognition API](https://elijahmanor.com/react-teleprompter) — Here’s an opportunity to produce a valuable addition to your online content production toolkit: a [teleprompter](https://en.wikipedia.org/wiki/Teleprompter), just like the pros use. Elijah Manor [An Introduction To SWR: React Hooks For Remote Data Fetching](https://www.smashingmagazine.com/2020/06/introduction-swr-react-hooks-remote-data-fetching/) — Application performance is a bi-product of doing only what is needed and only then when it is absolutely necessary. To wit, the [SWR](https://github.com/vercel/swr) library from [Vercel](https://vercel.com) which uses its automatic caching and fetching capabilities to level-up your app's performance. Ibrahima Ndaw [Next.js 101: What You Should Know](https://www.netlify.com/blog/2020/06/18/next.js-101-what-you-should-know/) — If you've noticed initial page loading with your React app and/or the [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) is not producing the results you expect, it may be that [Next.js](https://nextjs.org) is the cure for what ails. This article introduces Next.js and provides some essential need-to-know items worthy of consideration. Cassidy Williams 💻 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 the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. 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) — Use Vettery to connect with growing tech teams at startups and Fortune 500 companies. Vettery ℹ️ _Interested in running a job listing in React Status? There's [more info here.](https://booking.cooperpress.com/jobs)_ 📘 Tutorials and Stories [Setting Up a CI/CD Workflow on GitHub Actions for a React App](https://dev.to/dyarleniber/setting-up-a-ci-cd-workflow-on-github-actions-for-a-react-app-with-github-pages-and-codecov-4hnp) — If you thought [CI/CD](https://en.wikipedia.org/wiki/CI/CD) required a massive, end-to-end re-think of your workflow that may not be the case. Here's how to do it with just [GitHub Actions](https://github.com/features/actions) and [Codecov](https://codecov.io). Dyarlen Iber [Using Babel Transforms to Inject Analytics Code in React Native Apps](https://heap.io/blog/engineering/how-we-leveraged-asts-and-babel-to-capture-everything-on-react-native-apps) — [Heap](https://heap.io) is focused on comprehensively collecting user behaviours (such as taps and changes to text fields) so that users' interaction with the app can be clearly understood. Rather than creating their own version of React Native to support this functionality, they chose to inject analytics code at build time. Here's how. James Taber [Let’s Build a Financial Dashboard App With React in 3 Steps](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 [Creating a Server-Side Rendering React App with Deno](https://dev.p.ota.to/post/server-side-rendering-react-app-with-deno-4qf28vm8axb/) — Francesco claims to love both React and dinosaurs, so he seem well suited to writing this (brief) tutorial on building a React and Deno powered app complete with server-side rendering. Francesco Leonardi [Build an Animated Accordion List in React Native](https://blog.theodo.com/2020/06/build-accordion-list-react-native/) — We admit to having a soft spot for the [accordion list](https://ui-patterns.com/patterns/AccordionMenu): it seems intuitively the right way to organize screen-challenged mobile apps. This tutorial walks you through adding one to your React Native app. Benjamin Piggin [How To Create a Weather App in React](https://t.co/zbsvoQkKyg?amp=1) — We like to regularly feature tutorials which tie together those million little details into a concrete, easy-to-understand example. This time around it's a weather app which consumes the [OpenWeatherMap](https://openweathermap.org) API and provides a basic display from which you can incrementally add your own features. Hussain Arif [How to Create a Great User Experience with React, TypeScript, and the React Testing Library](https://www.freecodecamp.org/news/ux-studies-with-react-typescript-and-testing-library/) — Your app's user experience shouldn't really be an afterthought once you have built the core functionality. Rather, this article makes the case and provides the techniques to design UI excellence in from the beginning and support it with a comprehensive testing regime. TK 🔧 Code and Tools [NextAuth.js: Authentication for Next.js and Serverless](https://next-auth.js.org/) — If your [Next.js](https://nextjs.org) app is ready to go, short of comprehensive authentication, you’re in luck. NextAuth.js is a complete solution with built-in support for the popular [OAuth](https://en.wikipedia.org/wiki/OAuth) sign-in services and support for a wide range of databases. Check out the [live demo](https://next-auth-example.now.sh/) then grab the [repo](https://github.com/iaincollins/next-auth-example) and get going. NextAuth.js [Reaction: Want to Out-Shopify Shopify?](https://github.com/reactioncommerce/reaction) — Reaction is the [headless](https://en.wikipedia.org/wiki/Headless_software), API-centric platform which might just be the place to start. You can then spend 100% of your time making the UI both beautiful and exquisitely functional. Reaction Commerce [Articulate: Make Your Agent More Chatty](https://github.com/samtecspg/articulate) — You don't have to look far these days to find a chatbot that wants to answer your customer requests, technical questions and product enquiries. If adding one to _your_ product is in your future, this platform helps build conversational UIs for intelligent agents. Samtec Smart Platform Group [Building Chat with React? Stream Chat Has You Covered](https://getstream.io/chat/react-chat/tutorial/?utm_campaign=react_status&utm_medium=promoted_newsletter&utm_source=react_status_promoted) Stream sponsor [GraphQL Codegen: Generate Code From Your GraphQL Schema](https://github.com/dotansimha/graphql-code-generator) — While this has just launched in V1.0, we're intrigued enough with the concept and the potential time-savings to warrant taking a closer look and keeping an eye on it. Dotan Simha [react-native-pdf: PDF in the Palm of Your Hand](https://github.com/wonday/react-native-pdf) — This robust PDF-viewer can be easily added to React Native app. Easy to follow examples are provided to make implementation a snap. Wonday [Standard View: A 3D Graphics Library for React](https://github.com/Standard-Cognition/standard-view-core) — Why settle for ordinary 2D graphics when you can have 3D, such as provided by this [Standard Cognition](http://standardcognition.com) library? The [Standard View Storybook](https://standard-view.netlify.app/?path=/story) will help make the case. Standard Cognition 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