---
title: "10 best practices to follow when building components"
publication: "React Status"
issue: 144
published_at: "2019-06-26"
canonical_url: "https://react.statuscode.com/issues/144"
---

This week's React news       

#144 — June 26, 2019 

[Read on the Web](https://react.statuscode.com/issues/144)   React Status Your weekly React news digest, every Wednesday  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/i8arjacjelujjmfywivd.jpg)](https://dev.to/selbekk/the-10-component-commandments-2a7f)   

[The 10 Component Commandments](https://dev.to/selbekk/the-10-component-commandments-2a7f) — A handy walkthrough of 10 ‘practical commandments’ for creating components that you can share widely and that other developers will actually want to use. #6 is controversial, though. 

Kristofer Selbekk and Caroline Odden   

▶[A React Fiber Deep Dive with Dan Abramov](https://www.youtube.com/watch?v=aS41Y_eyNrU) — A fun but long (almost 2 hours!) video where Jenn Creighton and Dan Abramov help out two React developers overwhelmed by `div`s! A truly deep dive into the React Fiber engine and basically like getting a workshop for free. 

SMOOSHCAST   [![\](https://copm.s3.amazonaws.com/72959454.png)](https://hub.bignerdranch.com/big-nerd-ranch-webinars) 

[Management Training for Engineers: Communication](https://hub.bignerdranch.com/big-nerd-ranch-webinars) — Free Webinar - Tomorrow. 6/27. 

Big Nerd Ranch sponsor   

[Avoiding Recursive `useEffect` Hooks](https://javascriptplayground.com/avoiding-recursive-use-effect-hooks-react/) — The dependency array passed to the `useEffect` hook tells React when the effect should be re-run, but.. what happens if you update some state and cause a loop? Here’s how to avoid the problem. 

Jack Franklin   

[One Simple Trick to Optimize React Re-renders](https://kentcdodds.com/blog/optimize-react-re-renders) — An illustration of a natural, built-in performance optimization that doesn’t require using things like `React.memo`, `PureComponent`, or `shouldComponentUpdate`. 

Kent C Dodds   

[GoDaddy's Work on React Native's DateTimePicker Component](https://godaddy.github.io/2019/06/17/react-native-community-contribution-datetimepicker-component/) — In the process of building their own mobile app, GoDaddy has assisted in React Native’s ‘Lean Core’ project (in extracting UI components into separate repos) by extracting and merging the DatePicker and TimePicker components. 

GoDaddy Engineering native  

💻 Jobs  

[JavaScript / React Performance Optimization Engineer - Exodus (Remote)](https://www.exodus.io/careers/#performance-engineer-mobile) — Exodus are looking for an obsessive engineer to work on improving the performance of the Exodus mobile application. 

Exodus   

[Find a React Job on 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. 

Vettery  

📘 Tutorials and Stories  

[Redux Now Has Hooks: A Before and After Comparison](https://glennstovall.com/react-hooks-before-and-after/) — _Are you ready, kids?_ `react-redux` 7.1, released 2 weeks ago, added support for hooks, and here’s a look at how that can affect a simple code example. 

Glenn Stovall   

[Adding a WebAssembly Component to a React App with AssemblyScript](https://blog.scottlogic.com/2019/06/14/add-webassembly-to-react-app.html) — _“If I’m working on a React application for example, could I easily add some WebAssembly to support some things that perhaps need to run a bit quicker?”_ The answer is yes and here’s a practical demo. 

Andy Lee   

[📕 20 Patterns to Watch for in Engineering Teams](https://resources.gitprime.com/books/20-patterns/?utm_source=nl%28rs%29&utm_medium=email-nl&utm_campaign=nl%28rs%29) — Actionable insights to help you debug your development process with data. [Get your copy](https://resources.gitprime.com/books/20-patterns/?utm_source=nl%28rs%29&utm_medium=email-nl&utm_campaign=nl%28rs%29). 

GitPrime sponsor   

[Getting Started with GraphQL in React Native](https://pusher.com/tutorials/learning-graphql-react-native) — A practical guide to creating a simple GraphQL server which you can then query from a React Native app. 

Wern Ancheta native   

[Basic React Navigation for React Native Apps](https://blog.smartlogic.io/basic-react-navigation-for-react-native-apps/) — A look at how one team organizes the navigation within their React Native apps. 

Stephanie Vizzi native   

[How to Reuse Logic with React Hooks](https://rafaelquintanilha.com/how-to-reuse-logic-with-react-hooks/) — A look at how to best approach reusing logic and behavior without worrying about UI, a situation hooks were designed for. 

Rafael Quintanilha  

🔧 Code and Tools  

[redux-query: A Library for Managing Network State in Redux](https://amplitude.github.io/redux-query/) — Now provides two hooks, if you prefer: `useRequest` and `useMutation`, and has better support for non-React apps too. [GitHub repo.](https://github.com/amplitude/redux-query) 

Ryan Ashcraft   

[svelte-adapter: Use Svelte Components with Vue and React](https://github.com/pngwn/svelte-adapter) — An interesting experiment. See it [in action on CodeSandbox](https://codesandbox.io/s/svelte-adapterreact-8s33k). 

pngwn   

[Easily Scale Cloud Native Apps on the Cloud Built for Developers](https://try.digitalocean.com/developer-cloud/?utm_medium=display&utm_source=paid_newsletter_cooperpress_reactstatus&utm_campaign=Marketplace_Dev_Signup_Cold_Cooperpress) 

DigitalOcean sponsor   

[html-react-parser: An HTML to React Parser](https://github.com/remarkablemark/html-react-parser) 

Mark Xu   

[Ink 2.3 Released: React, but for Building Interactive Command-Line Apps](https://github.com/vadimdemedes/ink) 

Vadim Demedes   

[Firespace: Easy Bindings for Firebase Database](https://github.com/cevr/firespace) 

Cristian Velasquez Ramos         

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
