Writing better functional components

дата:
Plus seven ways to achieve conditional rendering in React. |

#222 — January 20, 2021

Read on the Web
React Status
Your weekly React news digest, every Wednesday

Upgrading to React 17: Fixing the Issues and Breaking Changes — React 17 mostly focused on under the hood changes but Wealthfront's engineers still encountered a few issues which they cover here.

Andrew Easton (Wealthfront)

Why React Context is Not a "State Management" Tool — And, importantly, why Context doesn't necessarily replace Redux, as some have argued before. Mark presents some clarification on the purpose and use cases for Context and Redux here.

Mark Erikson

React Wednesdays on Twitch: The New Season Has Started — React Wednesdays, the weekly chat show with the best and brightest from the React world, has a great January line up for you to check out. Add it to your calendar for a midweek pick-me-up.

Progress KendoReact sponsor

Let's Bring Spacer GIFs Back — Way back in the very earliest days of web development, 'spacer' GIFs formed part of a trick to get 'pixel perfect' page layouts particularly alongside HTML tables. While those days are thankfully long gone, there's a new reason why you may want to bring back these GIFs.

Josh W. Comeau

Seven Ways of Achieving Conditional Rendering in React — Conditional rendering means rendering only that which needs to be rendered instead of rendering everything by default. Here are a number of different ways of doing that, each suited to a particular set of conditions.

Fernando Doglio

How To Write Better Functional Components in React — Five simple tips which help write optimized functional components that are more readable, each with its own sample code showcased with JSFiddle.

Bikash Paneru

💻 Jobs

Senior Software Engineering Consultant - [100% Remote]  — Co‑founded by Justin Searls, Test Double is an engineering consultancy on a mission to improve the way the world builds software. Work on challenging projects with a collaborative, passionate team. 100% employee owned, and awesome perks.

TestDouble

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through 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

📘 Tutorials and Stories

How to Make a Snazzy One-Time Code Input in React Native — If your app demands a user enter a one-time code (from an SMS, say) here's a way to make it a nice experience with React Native.

John Schoeman and Devin Jameson (thoughtbot)

Redux: Hook, Line, and Simple — The author felt that a quick start guide for Redux was a significant hole in the Redux documentation. So he wrote his own from which those new to the state management system will benefit. It's the basics you need to know and no more.

Jacob Short

▶  Building Your Own E-Commerce System in 25 Days — 25 videos covering 25 days of using Next.js, Netlify and Stripe to build an e-commerce system.

Jon Meyers

Ship Faster. Enhance Customer Experiences. Beat C‑Suite Expectations

LaunchDarkly sponsor

▶  You Should Use React.memo More! — While "premature optimization is the root of all evil" (as Knuth said) this is the case for using React.memo most (but not necessarily all) of the time. It can be used to prevent wasteful rerending components that have not changed.

Cássio Zen

The JavaScript Skills You Need For React (+ Practical Examples) — At its core, React is a JavaScript framework so if you're going to make the leap, here is a guide on the JS concepts you should have mastered before moving on to React.

Reed Barger

▶  Automatic Imaging Scaling and Lazy Loading with the Next.js 10 Image Component — If you think you have to write reams of clever code to select an image size appropriate to the display size and then write still more code for lazy loading, the Next.js Image component can do all that for you. (7 minutes.)

James Quick (Auth0)

The Future of React: Server Components — We did pretty heavy coverage of React Server Components in 220 but given their potential significance for the future, we felt another independent review was worth your time.

Donovan So

🛠 Code and Tools

React Component for the Procedural GL JS Library — An easy-to-use framework for rendering landscapes for embedding in Web pages. Fast and optimized for mobile devices too. Here's a demo for you – feels very Google Earth‑like.

Felix Palmer

Focus Rings: A Centralized System for Displaying and Stylizing Focus Indicators — From the Discord team, a React-based solution to render clean and consistent focus ring indicators for keyboard navigation.

Discord

Stream's Activity Feeds React Native SDK v1.0 Released — Official React Native Activity Feeds SDK now supports Expo 40 and React Native 0.63.

Stream sponsor

Eight Powerful React Libraries To Try In 2021 — The number of GitHub stars provides one useful (though not definitive) assessment of a repo's popularity. All (but one) of these React-related repos have at least 10,000.

Mohit

use-eazy-auth: Simple Auth Magement in React — Takes the concepts of eazy-auth without the strong dependency on Redux.

Giovanni Fumagalli

GUI Tool to Generate React-Table Code for Your Projects — Either as a tool for learning or an end unto itself, here's an easier way to get the tabular elements of your UI up and running.

Akash Mittal

React Hooks Lib: A Set of Reusable Hooks — Before starting from scratch and writing your own custom hook, maybe you can find the one for which you are looking in this set.

Victor

Reagent: Create Components with ClojureScript — Devoted fans of Clojure will delight in the fact that they can now use ClojureScript in their React projects with this "minimalistic ClojureScript interface to React".

reagent-project

⚡️ Quick Bits:

Helpful libraries which you may have missed.

o

Комментарии

Отправить комментарий