Anti-patterns to avoid in React

#​278 — March 2, 2022

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday.

▶  Ten React Anti-Patterns to Avoid — A well presented eight minute video that quickly goes through a variety of approaches to reconsider (or at least think twice about before putting into action).

Fireship

Redux Toolkit 1.8.0 Released — If you’re down with Redux for managing state, the “official, opinionated, batteries-included toolset for efficient Redux development” is what you need 🙂 Among other things, this release adds new ‘listener’ middleware (think useEffect but for Redux store updates).

Mark Erikson and the Redux Team

How to Improve Designer-Developer Collaboration? — Ah, the infamous designer-developer handoff. Learn how Figma UI Kits can reduce friction between designers and developers by providing a single source of truth that all parties can reference and see how you can use them.

Progress Kendo React sponsor

▶  Kent C. Dodds’s (Classic) Beginner’s Guide to React Course — The folks at Egghead, a place that offers various online courses, is releasing some of their ‘classic’ courses on YouTube, and the first one is a React course from Kent C. Dodds. It’s 2.5 hours long, uses React 16, and dates from early 2020, so it’s not out of date 🙂

Kent C Dodds (Egghead)

Implementing Tetris Using React in 200 Lines of Code — The popularity of Tetris just never seems to fade. The exercise of recreating it with so little code is instructive and novel.

Niall Crosby

Jobs

Senior Frontend Engineer (TypeScript) — Remote / NYC — We’re the leading spend management platform for businesses. Small cross-functional front-end operations using React and TypeScript.

Ramp

React Frontend Role for Clay, a Digital Rolodex Backed by Forerunner and GC — This role will ensure that Clay’s web and desktop apps are best in class. We have a React app that leverages Redux and RxJS.

Clay

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

‘SolidJS Feels Like What I Always Wanted React to Be’ — An unsurprisingly opinionated piece. SolidJS is a particularly efficient reactive UI library and we’ve seen direct comparisons before but this piece goes into more specifics.

Nick Scialli

Hosting a React App with OpenFaaSOpenFaaS is an open source serverless function platform that sits on top of Kubernetes and it’s possible to host React-based apps in such a way. This post touches on all the main points, including cost.

Alex Ellis

How Many Re-Renders Is Too Many? — We have featured a number of this author’s articles which make beneficial use of animation to clearly understand React rendering behaviour. This time he zeros in on a single, simple question: when is the right time to start optimizing?

Alex Sidorenko

Implementing the Game of Life with React, Hooks and Chakra-UI

Ruslan Elishaev

🛠 Code and Tools

hackernews-remix-react: A Hacker News Clone Using React and Remix — This project provides a relatable, high profile example which employs React, Remix and other tools. The value of this exercise is enhanced if compared to other approaches such as Vercel’s creation of a similar clone using Next.js 12’s experimental React Server Components support.

Clinton D’Annolfo

An Introduction to Reagent: A Minimalistic React for ClojureScript — A project that provides a way to write efficient React components using (almost) nothing but plain ClojureScript (essentially a Lisp dialect that compiles to JavaScript) functions.

Dan Holmsand et al.

Free Activity Feeds & Chat APIs for Qualifying Teams. Activate Today

Stream sponsor

react-native-owl: Visual Regression Testing for React Native — Apply the concepts of regression testing to visual elements using this “API for capturing and comparing screenshots”.

Formidable

react-scrollama: Scrollytelling Made Simple Using Intersection ObserverScrollytelling—that is scrolling + storytelling—is an increasingly popular communications tool based on interspersing visualisations and narrative.

Jason Kao

⚡️ Quick Bits:

rc-select — A very comprehensive implementation of the venerable select component.

flowchart-fun — Generate flowcharts and diagrams from text. Seriously, give it a try!

Leave a Reply

Your email address will not be published.