---
title: "Play with a real-time lifecycle method visualizer for React"
publication: "React Status"
issue: 86
published_at: "2018-05-04"
canonical_url: "https://react.statuscode.com/issues/86"
---

This week's React news       

#86 — May 4, 2018 

[Read on the Web](https://react.statuscode.com/issues/86)   

react status 

[![\](https://res.cloudinary.com/cpress/image/upload/w_800/eib0hwhbydftghevujmr.jpg)](https://github.com/Oblosys/react-lifecycle-visualizer)  

[React Lifecycle Visualizer: A Real-Time Visualizer for Lifecycle Methods](https://github.com/Oblosys/react-lifecycle-visualizer) — Trace components by applying a single higher-order component which makes all lifecycle-method calls show up in an animated log. [Live demo on StackBlitz.](https://stackblitz.com/github/Oblosys/react-lifecycle-visualizer/tree/master/examples/parent-child-demo?file=src/samples/New.js) 

Martijn Schrage   

[A Complete React with Apollo and GraphQL Tutorial](https://www.robinwieruch.de/react-graphql-apollo-tutorial/) — A thorough tutorial on making GraphQL queries from React using Apollo Client to mediate the connection. 

Robin Wieruch   [![\](https://copm.s3.amazonaws.com/36188175.png)](https://start.sentry.io/for/react?utm_source=advertisement&utm_medium=display&utm_content=reactstatus&utm_campaign=sponsorship) 

[Fix Production Bugs in Seconds with Sentry](https://start.sentry.io/for/react?utm_source=advertisement&utm_medium=display&utm_content=reactstatus&utm_campaign=sponsorship) — Relying on users to report errors? Use Sentry to see unminified code right in the stack trace with source maps. Cut time to resolution from 5 hours to 5 minutes. Sentry is 100% open source and loved by 500K developers. [Sign up for free](https://start.sentry.io/for/react?utm_source=advertisement&utm_medium=display&utm_content=reactstatus&utm_campaign=sponsorship). 

Sentry sponsor   

[With Meiosis, You Don’t Need Redux, MobX, or RxJS](https://medium.com/@foxdonut00/you-dont-need-redux-mobx-rxjs-cerebral-6a735b150a02) — A simple pattern you can use for state management rather than using a library like Redux. There’s a really accessible [set of tutorials](http://meiosis.js.org/tutorial/toc.html) walking through the approach. 

Fox Donut   

[React Context in the World of Component Composition](https://medium.com/@ablamunits/react-context-in-the-world-of-component-composition-ce049d99afd9) — _“In this post, I will try to describe a different approach to using Context, and the benefits of it when thinking of component composition.”_ 

Boris Ablamunits   

▶[Using a Central Route Config with React Router v4](https://tylermcginnis.com/react-router-route-config/) — React Router v4 moved towards a component based routing approach, but you can still put together a centralized route config if you wish. 10 minute video plus code and notes. 

Tyler McGinnis  

💻 React Jobs  

[Senior Software Engineer (NYC)](https://www.helloalfred.com/openings?gh_jid=679035&gh_src=nklojydf1) — Hospitality/tech platform focused on building help into our homes. React, React Native, Node, TypeScript, PostgreSQL. 

Hello Alfred   

[Open to a New Job? Sign Up for Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-24218) — Top developers can get 5+ interview requests during their first week on Vettery. 

Vettery  

📘 Articles & Tutorials  

[Build an Instagram Clone with React](https://pusher.com/tutorials/instagram-clone-part-1) — A four-part tutorial aimed at beginners walking through using React, Node and Pusher to build a photo hosting and sharing app. 

Christian Nwamba   

[5 React Architecture Best Practices](https://www.sitepoint.com/react-architecture-best-practices/) 

Sebastian Deutsch   

[Mocking React/Apollo Data Tables for Web UI Development](https://spin.atomicobject.com/2018/05/04/mock-react-apollo-data/) — A refreshing UI-first approach to data requirements. 

Jordan Nelson   

[Whitepaper: What Should Developers Consider When Planning a React App?](https://www.telerik.com/campaigns/kendo-ui/wp-planning-react-app?utm_source=reactstatus&utm_medium=cpm&utm_campaign=kendo-ui-react-whitepaper-planreactapp&utm_content=brieflink) 

Progress Kendo UI sponsor   

[Pre-Rendering Your React App with 'react-snap'](https://itnext.io/pre-rendering-your-react-application-with-react-snap-234e2408ed39) 

Ahmet Kapusuz   

[How We Achieved 51% Efficiency Boost in Button Loading Speed](https://inkmonk.com/blogs/dev/how-we-achieved-51-efficiency-in-button-loading-speed/) 

Shiva Nandan  

🔧 Code and Tools  

[Proton Native: Built Desktop Apps using React Native Syntax](https://proton-native.js.org/) — Think React Native, but for building desktop applications instead of mobile. 

Gustav Hansen   

[Host React on a High-Performance Platform—Without Billing Surprises](https://try.digitalocean.com/performance/?utm_source=paid_newsletter+react+weekly&utm_medium=display&utm_campaign=2018_Brand&utm_content=5-4-2018+react+weekly+cooperpress) — DigitalOcean is the easiest cloud platform to build, deploy, and scale apps. Try it free with a $100 credit. 

DigitalOcean sponsor   

[Exploring the React Native Ecosystem: Backend, Database and Best Libraries](https://www.simform.com/react-native-ecosystem-backend-database-best-libraries/) 

Rakshit Soral   

[React Pledge: A Declarative Way to Track Promise Lifecycle States](https://github.com/petergombos/react-pledge) 

Peter Gombos         

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