React development for interfaces with a lot going on
A table that reshapes as filters change, or a form whose next question depends on the last answer. React is built for screens like these, and adds little to pages where nothing changes.
Reviewed by: Rahul Jaiswar, founder
React, briefly
React is a JavaScript library for building user interfaces from components, created at Meta and now governed by the React Foundation. It updates the screen as data changes; routing, data loading and server rendering come from a framework or other libraries.
Where we use it
Microsive ATS 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 rather than ten, so filtering and scrolling stay usable on the data your team actually holds.
Two setups, two situations
- React inside Next.js when public pages need to rank or load quickly on mobile data.
- React with Vite for an internal tool behind a login, where search does not matter and a simpler build helps.
When React is a good call
- The screen holds a lot of state: filters, selections, drag and drop, multi-step forms.
- You may hire a different team later. React is widely known among Indian developers, which makes the code you own easier to hand over.
- You need ready-made pieces like date pickers, data tables or charts.
When it adds weight for nothing
A page that is mostly text and images doesn’t need a component library to render it. And for one small widget on an existing WordPress or PHP site, a few lines of plain JavaScript are easier to maintain than a React build.
Five questions for your React developers
- How is server data kept apart from on-screen state?
- Which component library is used, and can it take our brand styling?
- How does a custom control, such as a drag-and-drop board, work with only a keyboard?
- Does the checkout or invoice flow have tests?
- Who reviews the package list before upgrades?
Common React problems
- Long lists. Thousands of rows re-rendering on a keystroke feel sluggish on a mid-range phone. Add pagination or list virtualisation where records pile up.
- Fetching inside effects. Hand-written fetches in effects race and show stale results. Use server rendering or a data-fetching library instead.
- 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 web apps.
A screen your current tools can’t handle?
Describe who uses it and what they need to get done on it.