DEV Community: Pramod

🚀 Code Splitting in React with Lazy Loading

Pramod — Fri, 13 Jun 2025 03:57:45 +0000

🚀 Code Splitting in React with Lazy Loading

As React apps grow, so do their bundle sizes. Loading everything at once can slow down performance and hurt user experience. That’s where code splitting and lazy loading come in.

In this blog, we’ll explore how to split your code and load components only when needed using React.lazy and Suspense.

💡 What is Code Splitting?

Code splitting means breaking up your JavaScript bundle into smaller chunks that can be loaded on demand.

Benefits:

🚀 Faster initial page loads
🚮 Less unused code
🔍 Better performance for large apps

React supports code splitting out of the box using dynamic import() and React.lazy().

🌐 Basic Example with React.lazy

import React, { lazy, Suspense } from 'react';

const AboutPage = lazy(() => import('./pages/About'));

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <AboutPage />
      </Suspense>
    </div>
  );
}

export default App;

🔍 Explanation:

lazy() dynamically loads the component.
Suspense shows a fallback UI (like a spinner) until the component is loaded.

📌 Best Practices

Use lazy loading for non-critical components like modals, settings pages, charts, etc.
Combine with React Router for route-based code splitting.
Keep fallbacks lightweight to avoid delays.

🗺️ Real-World Use with React Router

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

🎉 Bonus: Named Exports with React.lazy

React.lazy only works with default exports. If your component uses named exports, wrap it:

const LazyComponent = lazy(() =>
  import('./MyComponent').then(module => ({ default: module.MyComponent }))
);

🚀 Final Thoughts

Code splitting and lazy loading are essential for improving performance in large-scale React apps. They help reduce load time, enhance UX, and boost Lighthouse scores!

Start small: lazy load routes, then explore loading components, utilities, or charts on demand.

🔗 Useful Links

Thanks for reading! 👋 Feel free to share or comment with questions!

Understanding Redux Toolkit – Simplifying State Management

Pramod — Fri, 13 Jun 2025 03:50:36 +0000

🧠 Understanding Redux Toolkit – Simplifying State Management

Redux is powerful — but let’s be honest, the boilerplate and setup can feel like too much.

That’s where Redux Toolkit (RTK) comes in: it’s the official, recommended way to write Redux logic, and it drastically reduces complexity while improving readability.

🚀 Why Redux Toolkit?

Redux Toolkit provides:

✅ Cleaner syntax
✅ Built-in support for async logic
✅ DevTools integration
✅ Immutable updates via Immer
✅ Fewer bugs, more productivity

🔧 Core Concepts in Redux Toolkit

1. `configureStore()`

Creates the Redux store with good defaults (like DevTools and Redux Thunk).

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './features/counter/counterSlice'

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

2. `createSlice()`

Creates actions and reducers in one go.

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => {
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
  },
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

3. `createAsyncThunk()`

Simplifies async operations like API calls.

import { createAsyncThunk } from '@reduxjs/toolkit'

export const fetchUserData = createAsyncThunk(
  'user/fetch',
  async (userId) => {
    const response = await fetch(`/api/user/${userId}`)
    return response.json()
  }
)

💪 Putting It Together

Redux Toolkit allows you to focus on your app’s logic, not boilerplate.

Combine it with React hooks like useSelector() and useDispatch() for full power:

const count = useSelector(state => state.counter.value)
const dispatch = useDispatch()

<button onClick={() => dispatch(increment())}>+</button>

💡 Final Thoughts

If you’ve avoided Redux because of its steep learning curve — try Redux Toolkit. It’s made Redux more beginner-friendly, readable, and scalable.

Thanks for reading!
📩 Drop your questions or feedback in the comments.

🔗 Useful Links:

usememo & useCallback hook

Pramod — Sun, 05 May 2024 10:21:50 +0000

useMemo and useCallback are two important hooks provided by React to optimize performance in functional components by memoizing values and callbacks respectively.

useMemo : useMemo is used to memoize the result of a function so that the function is only re-executed when one of its dependencies changes. Syntax: const memoizedValue = useMemo(() =>computeExpensiveValue(a,b),[a, b]); Example: const memoizedResult = useMemo(() => { return computeExpensiveValue(a, b); }, [a, b]);

2.useCallback:
useCallback is used to memoize callbacks so that they are only recreated if one of their dependencies changes.
Syntax:
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
Example:
const memoizedCallback = useCallback(() => {
handleClick(id);
}, [id]);
In this example, handleClick will only be recreated if id changes.

These hooks are especially useful when dealing with expensive computations or passing callbacks to child components, helping to prevent unnecessary re-renders and optimize the performance of your React application.

DEV Community: Pramod

🚀 Code Splitting in React with Lazy Loading

🚀 Code Splitting in React with Lazy Loading

💡 What is Code Splitting?

🌐 Basic Example with React.lazy

🔍 Explanation:

📌 Best Practices

🗺️ Real-World Use with React Router

🎉 Bonus: Named Exports with React.lazy

🚀 Final Thoughts

🔗 Useful Links

Understanding Redux Toolkit – Simplifying State Management

🧠 Understanding Redux Toolkit – Simplifying State Management

🚀 Why Redux Toolkit?

🔧 Core Concepts in Redux Toolkit

1. configureStore()

2. createSlice()

3. createAsyncThunk()

💪 Putting It Together

💡 Final Thoughts

🔗 Useful Links:

usememo & useCallback hook

1. `configureStore()`

2. `createSlice()`

3. `createAsyncThunk()`