React Newsletter #177

React's useEffect and useRef, the iceberg of React Hooks, and understanding client side routing


React Hooks - tl;dr

A very quick guide (in tweet form) to the most commonly used React Hooks.


Articles

React's useEffect and useRef Explained for Mortals

A really great post that starts off with "why" then dives into the specifics of useEffect and useRef.

The Iceberg of React Hooks

This post is a 12-part case study that demonstrates common problems faced when using React Hooks and ways to fix them. It also provides a React Hooks checklist for small recommendations that serve as a quick reference.

Understanding client side routing by implementing a router in Vanilla JS

"When working with single page application frameworks, the routing is usually handled by some routing module or package. For many developers, how this routing actually works is something of a mystery. The purpose of this article is to help developers to gain a better understanding of how client side routing works in frameworks like React by implementing this functionality themselves in Vanilla JS. While not specific to React, this article gives great insight into how a router (like React Router) works.


Tutorials

Advanced Tutorial · Redux Starter Kit

In this advanced tutorial (the last in a three-part series that began with basic and intermediate tutorials), you'll learn how to use Redux Starter Kit as part of a larger "real world" app that is bigger than a to-do list example. This tutorial will show several concepts:

  • How to convert a "plain React" app to use Redux
  • How async logic like data fetching fits into RSK
  • How to use RSK with TypeScript

Sponsor

React developers are in demand on Vettery

Vettery is an online hiring marketplace that's changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today.


Projects

Chakra Component Library

Chakra UI is a simple, modular and accessible component library that provides building blocks for React applications.

Zero Abstraction Cost Styling (for React DOM & React Native)

"ZACS (Zero Abstraction Cost Styling) is a super-fast component styling library for cross-platform React web and React Native apps. Super-fast as in: there is no difference between using ZACS and writing and manually. That's because the library doesn't actually exist at runtime, it's entirely implemented as a Babel plugin, which compiles the "styled components" syntax down to bare metal. And because ZACS hides the API difference between web (DOM) and React Native, you can build a web and RN app with shared codebase without react-native-web.


Videos

21 Talks from React Rally

This is a playlist of 21 talks from React Rally 2019 in Salt Lake City.


made with ❤️ by ui.dev