React Newsletter #149

The new React lifecycle methods in plain English, React Suspense with GraphQL, and VSCode React Refactor


Articles

The (new) React lifecycle methods in plain, approachable language

What are lifecycle methods? How do the new React16+ lifecycle methods fit in? How can you intuitively understand what they are and why they are useful? If you’ve had questions on how the React lifecycle methods work — this article is for you.

React Suspense with GraphQL

With the release of Suspense, it's now possible to lazy load components in your application, but did you know that Suspense can also be used for data fetching? While the official React docs say that they're still ironing out the details for the API, it’s already possible to start experimenting with Suspense & data fetching with the current implementation. Check out how to do this with GraphQL operations in this post.

This benchmark is indeed flawed.

Benchmarks are hard. In this post Dan explains why and what issues to look out for.


Projects

VSCode React Refactor

This simple extension provides refactor code actions for React developers.

Recompose your overgrown JSX without worrying about the given data. This extension will do the dirty work for you without breaking your code.

react-animation

This package provides components you can use to easily add animation to your components, along with a set of pre-built animations and timing functions.

MDX-Deck-Live-Code

A component for mdx-deck for live coding directly in your slides.


Videos

4 Different Ways to Manage Form State

If you’re building frontend apps with React you’ll sooner or later need to add a form. But how? With React there’s certainly not just one way, but many. This tutorial mini-series explains four different ways (SubmitEvent, Controlled Components, Redux Form & Final Form) and works out the advantages and disadvantages of each. Aimed at everyone who’s new to React or wants to improve the way they manage form state.


made with ❤️ by ui.dev