Modeling UI states in a React form component using a finite state machine
#297 — March 29, 2021 | View in browser |
React Digest
Spread the word, build the community, share the knowledge – invite your friends.
sponsor
The Ultimate Guide to Building a UI Component Library
In this article series, TJ VanToll shares tips and strategies he’s learned from over a decade working with UI components on the web that can help you plan, build, and distribute your own corporate component library.
this week's favorite
Modeling UI states in a React form component using a finite state machine
This post explores an architectural design pattern called the finite state machine (FSM) that we used at OkCupid to craft a robust location search UX. A FSM is an architectural design pattern that allows us to model a large system as a collection of loosely coupled components. Each component in the system changes its behavior when the internal state changes.
This post will cover how to page through a collection of Star Wars characters with React Query, providing a smooth user experience.
useEncapsulation or why your React components should only use custom hooks
Given the nature of our work, that requirements change frequently and therefore code changes frequently, too, it is not surprising that our codebases become messy. Our logic gets strewn about like tools left on a workbench. The problem is that hidden in the mess of functions and objects is important information that is getting lost. Important historical decisions left without explanation or context and more. I'll try to come up with a contrived example quickly.
When I visualize data on the web, my current favorite environment is using D3.js inside of a React.js application. These two technologies are notoriously tricky to combine. The crux of the issue is that they both want to handle the DOM.
How to use React’s concurrent mode
React’s new concurrent mode allows your interface to be rendered while data fetching is in progress, providing an improved render lifecycle and a simple way to achieve parallel data fetching for multiple components.
courses
Cybersecurity Bootcamp: Pay Only If You Get A Job
Transition into cybersecurity, a lucrative and futureproof career where you protect essential systems and data with Springboard's newest bootcamp. Senior cybersecurity analysts earn $116k a year as a national average (Ziprecruiter). With a best in-class curriculum crafted by security experts with decades of experience as hiring managers, Springboard's program will get you the technical skills you need to start your cybersecurity career. Do real-life labs and projects, get the help you need to pass essential cybersecurity certifications such as the Security+, and benefit from 1:1 mentorship from industry experts as well as dedicated career support. With Springboard's deferred tuition option and job guarantee, you can choose to pay your tuition (and nothing more) only when you get a cybersecurity job.
newsletters
Older messages
What Would Happen If You Mutated Your React Redux State?
Sunday, March 21, 2021
And more news, tutorials and articles about React in this week's issue. #296 — March 22, 2021 View in browser React Digest Spread the word, build the community, share the knowledge – invite your
Sticky Table Header with React Hooks
Sunday, March 14, 2021
And more news, tutorials and articles about React in this week's issue. #295 — March 15, 2021 View in browser React Digest Spread the word, build the community, share the knowledge – invite your
Say No to Excessive Re-Rendering in React
Sunday, March 7, 2021
And more news, tutorials and articles about React in this week's issue. #294 — March 08, 2021 View in browser React Digest Spread the word, build the community, share the knowledge – invite your
Before You memo()
Sunday, February 28, 2021
And more news, tutorials and articles about React in this week's issue. #293 — March 01, 2021 View in browser React Digest Spread the word, build the community, share the knowledge – invite your
Should You Use useMemo in React?
Sunday, February 21, 2021
And more news, tutorials and articles about React in this week's issue. #292 — February 22, 2021 View in browser React Digest Spread the word, build the community, share the knowledge – invite your
You Might Also Like
🔒 The Vault Newsletter: November issue 🔑
Monday, November 25, 2024
Get the latest business security news, updates, and advice from 1Password. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
🧐 The Most Interesting Phones You Didn't See in 2024 — Making Reddit Faster on Older Devices
Monday, November 25, 2024
Also: Best Black Friday Deals So Far, and More! How-To Geek Logo November 25, 2024 Did You Know If you look closely over John Lennon's shoulder on the iconic cover of The Beatles Abbey Road album,
JSK Daily for Nov 25, 2024
Monday, November 25, 2024
JSK Daily for Nov 25, 2024 View this email in your browser A community curated daily e-mail of JavaScript news JavaScript Certification Black Friday Offer – Up to 54% Off! Certificates.dev, the trusted
Ranked | How Americans Rate Business Figures 📊
Monday, November 25, 2024
This graphic visualizes the results of a YouGov survey that asks Americans for their opinions on various business figures. View Online | Subscribe Presented by: Non-consensus strategies that go where
Spyglass Dispatch: Apple Throws Their Film to the Wolves • The AI Supercomputer Arms Race • Sony's Mobile Game • The EU Hunts Bluesky • Bluesky Hunts User Trust • 'Glicked' Pricked • One Massive iPad
Monday, November 25, 2024
Apple Throws Their Film to the Wolves • The AI Supercomputer Arms Race • Sony's Mobile Game • The EU Hunts Bluesky • Bluesky Hunts User Trust • 'Glicked' Pricked • One Massive iPad The
Daily Coding Problem: Problem #1619 [Hard]
Monday, November 25, 2024
Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given two non-empty binary trees s and t , check whether tree t has exactly the
Unpacking “Craft” in the Software Interface & The Five Pillars of Creative Flow
Monday, November 25, 2024
Systems Over Substance, Anytype's autumn updates, Ghost's progress with its ActivityPub integration, and a lot more in this week's issue of Creativerly. Creativerly Unpacking “Craft” in the
What Investors Want From AI Startups in 2025
Monday, November 25, 2024
Top Tech Content sent at Noon! How the world collects web data Read this email in your browser How are you, @newsletterest1? 🪐 What's happening in tech today, November 25, 2024? The HackerNoon
GCP Newsletter #426
Monday, November 25, 2024
Welcome to issue #426 November 25th, 2024 News LLM Official Blog Vertex AI Announcing Mistral AI's Large-Instruct-2411 on Vertex AI - Google Cloud has announced the availability of Mistral AI's
⏳ 36 Hours Left: Help Get "The Art of Data" Across the Finish Line 🏁
Monday, November 25, 2024
Visual Capitalist plans to unveal its secrets behind data storytelling, but only if the book hits its minimum funding goal. View Online | Subscribe | Download Our App We Need Your Help Only 36 Hours