How to build a dashboard in React
Building a dashboard in React requires a layout with a sidebar and header, lazy-loaded routes for each section, and data visualization components that load data asynchronously.
As the creator of CoreUI — an open-source UI framework used by over 500,000 developers — I designed the React dashboard template architecture that powers thousands of production admin panels.
The key pattern is a layout wrapper component that renders the sidebar, header, and a content area with <Outlet />, combined with React Router’s lazy() for code splitting.
This ensures the initial bundle is small and each dashboard section loads only when visited.
How to use Jotai in React
Jotai is an atomic state management library for React that stores state as small, composable atoms — individual pieces of state that components subscribe to directly, re-rendering only when that specific atom changes.
As the creator of CoreUI with 25 years of front-end development experience, I use Jotai when an application needs fine-grained reactive state updates with minimal overhead and no external state management infrastructure.
Jotai atoms are simpler than Redux slices and more granular than Zustand stores, making them ideal for UI state like filter values, modal open/close, or selected items in a list.
The API is intentionally minimal — just atom() and useAtom().
CoreUI Free React.js Admin Template v5.6.0
We’re excited to announce the release of CoreUI Free React.js Admin Template v5.6.0 on March 30, 2026! This update focuses on critical bug fixes, performance improvements, and enhanced developer experience with memory leak fixes and Fast Refresh support.
CoreUI PRO React Admin Template v5.9.0
We are excited to announce the release of CoreUI PRO React Admin Template v5.9.0 on March 30, 2026! This update brings JSX file extension refactoring, critical memory leak fixes, comprehensive dependency updates, and improved code organization to deliver a more maintainable and performant enterprise admin template.
How to use Zustand in React
Zustand is a minimal, hook-based state management library for React that provides global state without Redux’s actions, reducers, and providers — just a store and a hook.
As the creator of CoreUI with 25 years of front-end development experience, I use Zustand when an application needs shared state across many components but the full Redux setup would be overkill.
Zustand stores are plain JavaScript objects with state and actions defined together, and any component can subscribe to exactly the slice of state it needs.
The setup is a single create() call — no Provider, no boilerplate.
How to use Redux Toolkit in React
Redux Toolkit’s RTK Query is the most powerful data fetching and caching solution for Redux applications, automating loading states, error handling, and cache invalidation that you’d otherwise write by hand.
As the creator of CoreUI with 25 years of front-end development experience, I use RTK Query in complex React dashboards where multiple components fetch the same data and need to stay synchronized without redundant API calls.
Define your API once with createApi, and RTK Query generates typed hooks, manages caching, handles request deduplication, and automatically re-fetches stale data.
This eliminates the need to write fetchUsers.pending, fetchUsers.fulfilled, and fetchUsers.rejected reducers for every endpoint.
CoreUI PRO for React v5.24.1 - Maintenance Update
We are pleased to announce the release of CoreUI PRO for React v5.24.1. This maintenance release includes bug fixes and improvements while maintaining all functionality from v5.24.0, including the powerful Calendar component with custom cell rendering and quarter selection, plus Chip and Chip Input components.
How to optimize large lists in React
Rendering thousands of DOM nodes in a React list causes severe performance degradation — slow initial render, janky scrolling, and high memory usage.
As the creator of CoreUI with 25 years of front-end development experience, I’ve optimized data-heavy tables and lists in CoreUI dashboards that display thousands of rows, and virtualization is the single most impactful technique.
The approach with react-window renders only the rows visible in the viewport, keeping the DOM node count constant regardless of data size.
A list with 10,000 items renders the same ~20 DOM nodes as a list with 10 items when virtualized.
How to fix stale closures in React hooks
Stale closures are one of the most confusing bugs in React hooks — a callback or useEffect captures a variable’s value at the time it was created, then the variable updates but the closure still uses the old value.
As the creator of CoreUI with 25 years of front-end development experience, I’ve debugged dozens of stale closure bugs in complex React components and the fix always comes down to dependency arrays and refs.
The problem occurs because JavaScript closures close over variables by reference at the time of creation, and React components close over state at each render.
Understanding when to add dependencies to arrays and when to use a ref solves the vast majority of stale closure bugs.
How to use Redux in React
Redux with Redux Toolkit is the standard solution for complex global state in React applications — when Context API becomes too verbose or performance-intensive, Redux provides predictable state updates with excellent DevTools support. As the creator of CoreUI with 25 years of front-end development experience, I use Redux Toolkit (RTK) in large-scale React dashboards where multiple features share state and async data fetching needs centralized management. Redux Toolkit eliminates the boilerplate of classic Redux — no separate action creators, no switch statements, just slices with immer-powered reducers. Start with the simplest state management that works; reach for Redux when you have genuinely complex cross-component state.