#168 — December 11, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

How to Manage Global State with Context API and Hooks“Redux absolutely has its use cases and advantages. This is merely an alternate way to manage global state in a simpler way without the need of external libraries.”

Jonas Løchsen

Preact 10.1: A Fast 3KB React Alternative with The Same API — Preact is an interesting project that often sees use in places where speed and size are of the absolute essence (Uber used it until they built their own in-house framework). New in 10.1 is support for a devtools extension and a SuspenseList component. GitHub repo.

Preact

⚛️ New Course: Client-Side GraphQL in React — Interact with GraphQL using React hooks to build amazing things with React and GraphQL!

Frontend Masters sponsor

Create React App 3.3 Released — The latest version of the popular ‘create a React app in one command’ tool is out, adding custom templates and support for the new optional chaining and nullish coalescing operators.

Facebook

Don't Call A React Function Component — A demonstration of the difference between React.createElement and calling a function component directly and why you should render function components instead of calling them.

Kent C Dodds

The Unseen Performance Costs of Modern CSS-in-JS Libraries in React Apps — An attempt to “shed some light into the potentially unknown performance implications when using the most prominent CSS-in-JS libraries”.

Aggelos Arvanitakis

💻 Jobs

Full Stack Engineer — Expensify seeks a self-driven individual passionate about making code effective, with an understanding of algorithms and design patterns.

Expensify

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

📘 Tutorials and Stories

React is a State Manager Too, You Know — I’ve seen this point made a few times over the years. You don’t necessarily need Redux or another state manager, since React has its own internal mechanisms you can use for your components. (Note: You need to click on the ‘Project’ icon on the embedded code boxes to see the various files.)

Tucker Blackwell

▶  The Great Gatsby(JS) Bootcamp — It’s over 4 hours long but there’s a lot of value here (and it plays well at 1.5x speed) if you haven’t worked with Gatsby yet.

Andrew Mead

Tried & True Tips from 24 React Experts to Make You More Productive — Get invaluable, practical productivity tips from React and JavaScript experts on how to excel in React. Read on.

Progress KendoReact sponsor

▶  How to Create React Native Native Modules for Windows 10 — Microsoft’s using React Native to build parts of Office now, so it’s definitely a viable approach. This video (audio is not great) shows off some of the practical side of things.

David Red62

Working with Azure Application Insights in your React appApplication Insights is a Azure service for instrumenting apps and events you trigger from them.

Sondre Widmark and Marie Buøen

Oh, the (React) Suspense! — A brief and accessible introduction to what ‘suspense’ means in the React world, as of the recent experimental releases.

Julia Hill Roa

Setting up ESLint and Prettier for React in VS Code

Hayk Baghdasaryan

▶  Building an Animated Tree Chart with React, Hooks, and D3 — A 25 minute screencast.

Murat Kemaldar

Control Your Components — A quick guide to creating components that control their own state, if you want them to.

Kristofer Giltvedt Selbekk

Test-Driven React: The Key to Joyful Coding is Faster Feedback

The Pragmatic Bookshelf sponsor

▶  One Software Engineer's Salary History as a React Developer — It’s a hugely personal topic and no-one’s experience is exactly the same as anyone else’s, but you might find it interesting anyway, especially as this developer is based in Europe.

Matt Kander

Migrating to GraphQL at Airbnb — Airbnb has successfully migrated much of its API to GraphQL, resulting in improved page load times and a more intuitive user experience.

InfoQ

🔧 Code and Tools

react-beautiful-dnd 12.2 Released: Accessible Drag and Drop for Lists — Things are a lot smoother with this release in terms of shuffling around ‘colliding’ items when dragging and there’s a nice animated GIF to prove it.

Atlassian

react-use-fuzz: A Hook for Client Side Fuzzy Search using Fuse.js — Check out the Fuse.js homepage for an example of where this is useful. Essentially, this lets your search system be more resilient to potentially erroneous/misspelt user input.

Joshua Tonga

react-mde: A Markdown Editor Component — There’s a CodeSandbox demo here.

André Pena

reactstrap 8.0: Simple React Bootstrap 4 Components — Here’s how to get started with it.

reactstrap

React Cookie Banner That Can Be Dismissed with a Scroll — It’s for you to to decide if this passes the requirements in your country (if cookie-related laws apply there).. but it does what it says on the cookie jar. Live example.

buildo