--- title: "Best practices for building resilient React components" publication: "React Status" issue: 130 published_at: "2019-03-20" canonical_url: "https://react.statuscode.com/issues/130" --- This week's React news #130 — March 20, 2019 [Read on the Web](https://react.statuscode.com/issues/130) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/txul0utlbtr6iah060e2.jpg)](https://overreacted.io/writing-resilient-components/) [Writing Resilient Components](https://overreacted.io/writing-resilient-components/) — React’s Dan Abramov continues his streak of writing serious in-depth helpful articles with this guide covering several principles to set you on the right path building solid React components. Dan Abramov [React Component Types: A Complete Overview](https://www.robinwieruch.de/react-component-types/) — Get a complete historical overview and code examples of the different types of React component (such as those built with `createClass`, HOCs, function components). Robin Wieruch [![\](https://copm.s3.amazonaws.com/d0423989.png)](https://www.mongodb.com/blog/post/using-aws-rekognition-to-analyse-and-tag-uploaded-images-using-stitch?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship&utm_content=20190320&utm_medium=display&utm_source=reactstatus) [Using AWS Rekognition to Analyse and Tag Uploaded Images Using Stitch](https://www.mongodb.com/blog/post/using-aws-rekognition-to-analyse-and-tag-uploaded-images-using-stitch?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship&utm_content=20190320&utm_medium=display&utm_source=reactstatus) — Learn how to supplement new content with information as it is inserted into the database with Reckognition and Stitch. MongoDB sponsor [use-query-params: A React Hook for Managing State in URL Query Parameters](https://github.com/pbeshai/use-query-params) — Encode and decode data of any type as query parameters with smart memoization to prevent creating unnecessary duplicate objects. [Example code and demo.](https://peterbeshai.com/use-query-params/) Peter Beshai [How to Build A Real Time Logo Detection App with React Native](https://medium.com/crowdbotics/how-to-build-a-real-time-logo-detection-app-with-react-native-google-vision-api-and-crowdbotics-9ed65fbcd15) — How to build a React Native app that performs real time logo identification using Google’s [Cloud Vision API](https://cloud.google.com/vision/). Aman Mittal 💻 Jobs [Full-Stack Engineer - React/Rails (NYC)](https://www.jointempest.co/product-engineer-1/) — Rapidly growing healthcare startup in the addiction and sobriety space seeking talented developers to help build the future of online addiction and sobriety support. Tempest, Inc. [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 dev roles and is completely free for job seekers. Vettery 📘 Tutorials [Refactoring a Small Next App to Use Hooks](https://dev.to/selbekk/refactoring-a-small-next-app-to-use-hooks-2agj) — A look at how a developer refactored a small React app to use hooks. selbekk [How to Understand a Component’s Lifecycle Methods](https://medium.freecodecamp.org/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630) Anchal Nigam [See Things Better. Build Things Better](https://www.gitprime.com/?utm_source=reactstat&utm_medium=email-nl&utm_campaign=reactstat%28q1%29) — Aggregating git data into understandable reports, to help make teams more successful. Debug your development with objective data. GitPrime sponsor [How to Use Sass and Styled Components in a React App](https://www.iamtimsmith.com/blog/how-to-use-styles-in-a-react-js-application/) Tim Smith [Building Angular and React Applications Together With Nx](https://blog.nrwl.io/building-angular-and-react-applications-together-with-nx-78b5578de598) — A look at how Nx can help you develop with multiple frameworks. Victor Savkin 🔧 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/hmequbcykmg8pgei1ewm.jpg)](https://github.com/rcaferati/react-native-really-awesome-button) [react-native-really-awesome-button: A Set of 3D UI Buttons for React Native](https://github.com/rcaferati/react-native-really-awesome-button) — Animated, 3D-style buttons that work at 60fps and support showing built-in progress bars. Rafael Caferati [Storeon: A 196 Byte Event-Based Immutable State Manager for React and Preact](https://github.com/ai/storeon) Andrey Sitnik [React Border Wrapper: A Wrapper for Placing Elements Along DIV Borders](https://github.com/Metroxe/react-border-wrapper) Christopher Powroznik [Get a Chance to Win Lego Star Wars Tie Fighter. Take Our ~7min Survey](https://www.surveymonkey.com/r/runtime2019f) ActiveState sponsor [useDimensions: A React Hook to Measure DOM Nodes](https://github.com/Swizec/useDimensions) — _“This is useful when you have to align items, or respond to browser width, or … lots of reasons okay.”_ Swizec Teller [Reanimated Bottom Sheet: A Configurable 'Bottom Sheet' Component for React Native](https://github.com/osdnk/react-native-reanimated-bottom-sheet) — A highly configurable component that emulates native, mobile [‘bottom sheets’](https://material.io/design/components/sheets-bottom.html#standard-bottom-sheet), built with [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated) and [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler). Michał Osadnik [react-input-color: React HSV Color Picker](https://github.com/wangzuo/react-input-color) Wang Zuo 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