🚀 React.js UI Development: 8 Different Ways to Do the Same Thing

This content originally appeared on DEV Community and was authored by Kushal jangra

One of the coolest (and sometimes confusing) parts about React.js is that there’s never only one way to build something.
From styling to data fetching to animations — React gives you multiple valid options for the same task.

In this post, we’ll break down 8 common UI areas and show the different approaches developers can take.

1️⃣ Styling Your Components

React doesn’t force you into a single styling method — you have choices:

Option Example Pros Cons
Plain CSS Import style.css Simple, fast start Risk of global name conflicts
CSS Modules Button.module.css Scoped styles per component Slightly verbose imports
Inline Styles

Dynamic per-element styling No media queries easily
Styled Components const Btn = styled.button Scoped, theme-friendly Runtime overhead
TailwindCSS className="bg-blue-500 p-4" Utility-first, fast Class names can get long
UI Libraries Prebuilt & accessible Limited custom look

💡 Tip: For a design-heavy app, TailwindCSS or Shadcn UI works great. For quick MVPs, UI libraries like Chakra or MUI are faster.

2️⃣ Managing State

Different tools for managing component and global state:

Option Example Best For
useState const [count, setCount] = useState(0) Local component state
Context API AuthContext.Provider Small global state
Redux useSelector(state => state.user) Large, complex apps
Zustand const useStore = create() Simple global state without boilerplate
Recoil/Jotai atom, useRecoilState Fine-grained reactivity
Local Storage Sync with useEffect State persistence after refresh
3️⃣ Writing Components

You can structure components in various styles:

Option Example Notes
Function Components function Header() {} Modern standard with Hooks
Class Components class Header extends React.Component Legacy, still supported
Compound Components Flexible APIs for UI widgets
Render Props }/> Powerful but can be verbose
HOCs withAuth(Component) Wrap components with extra logic
4️⃣ Routing Between Pages

React doesn’t include routing by default, so you have options:

React Router DOM →

Next.js Routing → File-based routing

TanStack Router → Type-safe routing

Custom Routing → Your own conditional rendering logic

5️⃣ Fetching Data

Different libraries for API calls:

Option Example
fetch API fetch('/api')
Axios axios.get('/api')
React Query useQuery(['user'], fetchUser)
SWR useSWR('/api/user', fetcher)
GraphQL Clients Apollo, Urql

💡 Tip: For caching, background refetching, and retries, React Query or SWR is a game-changer.

6️⃣ Handling Forms

Forms are everywhere — here’s how you can manage them:

Controlled Components → Store every input in state

Uncontrolled Components → Use ref to read values

React Hook Form → High performance, built-in validation

Formik → Popular form management + Yup validation

7️⃣ Adding Animations

Make your UI feel alive:

CSS Transitions → transition: all 0.3s ease;

Framer Motion →

React Spring → Physics-based animations

GSAP → Complex timeline animations

8️⃣ Using UI Component Libraries

For quick and consistent UI, try:

Material UI (MUI)

Chakra UI

Ant Design

Mantine

Shadcn UI (Radix + Tailwind)

🏆 Takeaway

React is unopinionated — it gives you the building blocks but doesn’t tell you exactly how to use them.
That’s both freedom and responsibility for you as a developer.

Rule of Thumb:

Small project → Keep it simple

Medium project → Use lightweight state & styling solutions

Large project → Invest in scalable state management & UI patterns

💬 Question for you:
Which combo do you prefer for building UIs in React?
Mine is → TailwindCSS + Zustand + React Query for most apps.

If you found this helpful, follow me for more React + Frontend Development tips 🚀

This content originally appeared on DEV Community and was authored by Kushal jangra