React development for busy operations screens
A receiving screen that re-sorts as filters change, or a check-in form whose next question depends on the last answer. React is built for screens like these, and adds little to a page where nothing moves.
Reviewed by: Rahul Jaiswar, founder
React, briefly
React is a JavaScript library for building user interfaces out of components. It was created at Meta and is now governed by the React Foundation. React redraws the screen as data changes; routing, data loading and server rendering come from a framework or other libraries.
Is React a good choice for an internal dashboard?
Yes, when the screen holds a lot of state: filters, selections, drag and drop, forms with several steps. A dispatch board or a list of today’s inbound appointments fits that description. For a page that is mostly text and images, or one small widget on an existing site, a few lines of plain JavaScript are easier to maintain than a React build.
Where we use it
Microsive ATS, the recruitment software we built and run, uses React. We also build client websites and web apps with it, and this site is built with it too.
What we check
We test with a realistic number of rows, not ten, so filtering and scrolling stay usable on the amount of data your team actually works with.
Two setups, two situations
- React inside Next.js when public pages need to rank in search or load quickly on a phone.
- React with Vite for an internal tool behind a login, where search doesn’t matter and a simpler build helps.
Why React eases a later handover
React is one of the most widely used front-end libraries, so if you move the code you own to a different team later, finding developers who can read it is not the hard part. Its ecosystem also covers the ready-made pieces operations screens need: date pickers, data tables and charts.
Five questions for your React developers
- How is data from the server kept apart from on-screen state?
- Which component library is used, and can it take our styling?
- How does a custom control, such as a drag-and-drop board, work with only a keyboard?
- Do the billing and order flows have tests?
- Who reviews the package list before an upgrade?
Common React problems
- Long lists. Thousands of rows redrawing on every keystroke feel slow, and slower still in the browser on a handheld scanner. Add pagination or list virtualization wherever records pile up.
- Fetching inside effects. Hand-written fetches in effects race each other and show stale results. Use server rendering or a data-fetching library.
- Custom widgets and accessibility. Native HTML elements come with keyboard and screen-reader support; custom ones need it added. Put labels, focus order and keyboard paths in the estimate.
For typing these components, see TypeScript. To commission an app, see software and web apps.
A screen your current tools can’t handle?
Tell us who uses it, on what device, and what they need to get done on it.