#169 — December 18, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Yes, get out those handkerchiefs and shed a tear, for this is the final issue of React Status of the year! 😂 We'll be back on January 8 but in this issue we're rounding up the most popular links of the year as clicked by you and other readers, as well as the biggest React news of the year overall (organized month by month below).

Thanks for your continued support, we really appreciate it. Happy new year!
— Peter Cooper and the Cooperpress team

🏆 The Top 6 Links of 2019

1. The 10 React Component Commandments — By far the most popular link of the year, this post walks through 10 ‘practical commandments’ for creating components that you can share widely and that other developers will actually want to use. Certainly some good practices to adopt here into the new year.

Kristofer Selbekk and Caroline Odden

2. From Redux to Hooks: A Case Study — "Hooks" was clearly the React 'Word of the Year' so it's no surprise this interesting exploration of using hooks instead of Redux did well. They did feel, however, that hooks are “only for specific types of applications” but I imagine this opinion may have changed since.

Sergey Ryzhov

3. Best Practices for Building a Large Scale React App — 'Best practice' roundups always do well, and so did this post which covers a few concepts worth keeping in mind to make neater, larger scale apps over time.

Aman Khalid

Tried & True Productivity Tips from 25 React Experts — The KendoReact team curated the top productivity tips of 25 React experts, from smart ways to hit the ground running with React to advanced productivity hacks. Includes ideas from Emma Wedekind, Kent C. Dodds, vjeux and many more. Check them out.

Progress KendoReact sponsor

4.  How Facebook is Building the New Facebook.com with React, GraphQL and Relay — A key story this year was that Facebook's next design would be fully powered by React and Relay and this 35 minute talk went into the technicalities.

Facebook for Developers video

5. Writing Resilient React Components — Dan Abramov's Overreacted blog was hugely popular this year, but this post, covering several principles to set you on the right path building solid components, did the best with React Status readers.

Dan Abramov

6. A Complete Guide to React's useEffect — An amazingly epic post that will get anyone working with or thinking about React Hooks excited. It’ll help you understand a lot of the concepts involved. No time? There’s a good TLDR too.

Dan Abramov

💻 Jobs

Software Engineers, Frontend at Fictiv (San Francisco) — We bring a user friendly experience to manufacturing, making it easy to turn designs into real products. Use the latest tech and JS to iterate quickly, ensuring a rapid feedback loop between us and our customers.

Fictiv

Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

📅 Month by Month

JANUARY: Not everything has to be a hook, said Dan Abramov. The React team also asked for help in translating the docs.

FEBRUARY: React 16.8 was released bringing us hooks for real.

MARCH: React Native 0.59 was released, as well as React Router v5.

APRIL: Create React App 3.0 was released.

MAY: Microsoft unveiled React Native for Windows. And Material UI 4.0 was released. React Europe took place too.

JUNE: Styled Components v5 was released.

JULY: Framer Motion succeeded Pose as a powerful way to animate React components.

AUGUST: React Native's homepage got a neat redesign and React 16.9 was released, along with a roadmap for React's near future. The new DevTools came out too. React Rally took place.

SEPTEMBER: The React Riot online hackathon took place. Gatsby raised $15m in funding.

OCTOBER: Preact X and Ionic React were released. Concurrent mode was also experimentally introduced and React Conf took place.

NOVEMBER: Everyone pretty much took some rest, except for Discord who showed off how they achieved native performance when using React Native.

DECEMBER: The React advent calendar kicked off again.

📘 2019's Top 6 Tutorials

My Experience Moving From Enzyme to react-testing-library — A developer saw react-testing-library gaining traction and liked that it supported hooks out of the box, so he gave it a chance. Here, he reflects on why react-testing-library has “changed the way I think about writing React tests.”

David Boyne

Progressive React: Building Faster React Apps — A guide (which starts off with a handy checklist) on building faster React apps by way of a handful of useful optimizations.

Houssein Djirdeh

Don't Sync State, Derive It — Avoid synchronization bugs and hidden complexity by deriving (or calculating) state in React apps on the fly rather than keeping numerous copies of state around your app.

Kent C Dodds

Serverless Handbook – The Resource I Wish I Had — Curious about serverless? Wanna get into backend but not sure how? This handbook is for you. Recipes you can apply today.

Swizec Teller sponsor

5 Tips to Help You Avoid React Hooks Pitfalls — Explores some hook gotchas and how to avoid them.

Kent C Dodds

useEffect and useRef Explained for Mortals“Sometimes the pantheon of React Gods have a hard time translating their wisdom into language the rest of us can understand.” If you agree, this introduction may well be for you.

Lee Warrick

Don’t 'Eject' Your Create React AppEjecting is the one-way process of turning an app running on Create React App into a standalone app you have full control over, but Adam argues you probably don’t want to do this.

Adam Laycock

🔧 2019's Top 6 Code and Tools

Create React App 3.0 Released — The popular tool to set up a modern React app in a single command took some key steps forward with support for Jest 24, hooks, TypeScript linting, and more. 3.3.0 is currently the latest release.

Facebook

Reakit 1.0: A Toolkit for Creating Rich, Accessible React UIs — WAI-ARIA 1.1 compliant components including cards, popovers, headings, lists, labels, etc.

Diego Haz

Styled-Components v5: Faster CSS Styling for Your React ComponentsStyled Components is a popular way to bring CSS and JavaScript together for styling components.

Evan Jacobs

Rock Solid, Modern Stack—Rails 5 API + ActiveAdmin + Create React App

Heroku sponsor

React Hook Form: Simple, Extensible React Form Validation — It’s not just an interesting project, but it has one of the best project homepages I’ve seen this year too, complete with code comparisons with similar libraries. GitHub repo.

Blue Bill

Navi: A React Router with Hooks and Suspense — A new kind of router for React that that lets you declaratively map URLs to content, even if that content is asynchronous. This is a great overview packed with examples, or you can head straight to the code..

James K Nelson

React Chaos: Introduce Some Chaos into Your ComponentsChaos engineering is the idea of introducing random faults into your apps in order to test their resiliency or to find weak points.. and this is a proof-of-concept higher order component that will randomly ‘break’ your React components. No updates in the past three months, however, but the concept was clearly popular.

J.C. Hiatt