DEV Community: Raju Sarkar

N+1 query in databases

Raju Sarkar — Sun, 16 Nov 2025 20:16:04 +0000

Table of content

What is N+1 query
Analogy: The library
Technical example
Inefficient and Efficient query
Why you should care about the N+1 query problem

What is N+1 query

The N+1 query problem is a database anti-performance pattern, where an application executes one query to fetch a list of items (N items in 1 query) and then makes N additional individual queries to fetch related data for each item in that list(N number of queries). So, in total you are making 101 queries, 1 query to get the list and 100 query to get names of authors.

This results in N+1 queries for what should ideally be a single efficient or a few queries.

Analogy: The Library

Imagine you go to a library and you ask the librarian to give you a list 100 books of your favorite genre. The librarian gives you the list of 100 books(this is 1 query).

Now you have your list, but you don't know author's name of those 100 books. To know the name of those authors you again go to the librarian and ask him, Hey Librarian can you tell me please what is the name of the author of this book?. You ask this question for each books on that list. In the end guess what, you end up asking the librarian 100 more questions.

The gist is that you are making 1 query to get the list and then you are making N number of queries to get the authors name.

Technical Example

Assume that you own a e-commerce platform, where the sellers can list products and users can buy them. In your admin dashboard you want to display all the sellers and their products. There are two tables you have to query 1.seller, 2.product.

Let's see both inefficient and efficient ways of querying-

Inefficient:

Here you first get the sellers by querying the seller table:

const sellers = await db.select().from(seller);

And then for each seller you get the products

const allProducts = [];
for (const s of sellers) {
  const products = await db
    .select()
    .from(product)
    .where(eq(product.createdBy, s.id));
  allProducts.push(...products);
}

You are making a api call from your client and then the api do the following:

First it query every seller from seller table
Then it fetches products for each seller. So, if there were 100 seller you will make the first1 query and then 100 more queries in total 101 queries to get what you want.

Efficient:

The efficient version of the above is you tell the db hey please give me all the sellers and their products by joining the seller and product tables, this way you are going to the db only once and making a single query.

const sellersAndProducts = await db
  .select()
  .from(seller)
  .innerJoin(product, eq(seller.id, product.createdBy));

Here, instead of fetching products one by one for each seller, you made a single query by joining tables. This one is more simple compare to the first one and also good for database performance.

Why you should care about the N+1 query problem?

The answer always will be the performance.

The N+1 query consumes lot lot more resources.
Lot lot more queries.
Each individual db query adds to the overall latency.

If the size of your db is small you might not face any performance issue but as your db grows, your user base grows the increased number of queries places a higher load on the database and on the server leading to performance bottleneck.

React Context APIs, State sharing and Zustand

Raju Sarkar — Wed, 03 Sep 2025 16:42:15 +0000

In React, we typically use props to pass data from a parent component to its children component. Props passing works well for small applications, but in larger application, props passing become a pain — especially when data needs to be accessed by deeply nested components.

Lets imagine a scenario where you have three components — A, B(B is child of A), and C(child of B). If component C needs data from component A, you have to pass that data through B even though B does not actually need it. This makes your development a little bit complex and also, you have to compromise with the performance.

To solve this problem, React provides the Context API, which allows you to share values across different component, without having to pass props manually at every level.

Get started with Context API

Create a empty React project

npm create vite@latest
// Select React
// Then select typescript

After this, create two folder inside the src — context and components.

Lets setup the context first.

//ThemeContext.tsx

import { createContext, useContext, useState, type ReactNode } from "react";

// theme context with default theme value `light`
// and a empty callback function to change theme
const ThemeContext = createContext({ theme: "light", toggle: () => {} });

// this is our theme provider
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
  // state variables for theme
  const [theme, setTheme] = useState("light");

  // theme toggle function
  const toggle = () =>
    setTheme((prev) => (prev === "light" ? "dark" : "light"));

  return (
    // wraping the children with context provider
    // and providing valus
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
};
// export the useTheme, so it can be consumed by components
export const useTheme = () => useContext(ThemeContext);

In the above code we are importing — createContext, useContext, useState and type ReactNode from React.

import { createContext, useContext, useState, type ReactNode } from "react";

At first we need to initiate a context, So we are initiating ThemeContext with a default value light and a callback function, toggle to change the theme value, this will create a context that components can read from or update values of that context.

// theme context with default theme value
// and a empty callback function to change theme
const ThemeContext = createContext({ theme: "light", toggle: () => {} });

Now we need a context provider, for that we are creating ThemeProvider, this is the component that will wrap a child component and give access to data, values to that child component.

// this is our theme provider
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
  // state variables for theme
  const [theme, setTheme] = useState("light");

  // theme toggle function
  const toggle = () =>
    setTheme((prev) => (prev === "light" ? "dark" : "light"));

  return (
    // wraping the children with context provider
    // and providing valus
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

In the above code we are wrapping the children with our ThemeContext that we have created before.

And at last we are exporting the useTheme, so components can access the ThemeContext value without wrapping them by ThemeProvider.

Now lets actually use the ThemeProvider in our App.tsx. First lets create a component, ThemeSwitch.

// ThemeSwitch.tsx

// import the useTheme from our theme context
import { useTheme } from "../context/ThemeContext";

export default function ThemeSwitch() {
  // initiate
  const { theme, toggle } = useTheme();

  return (
    <div className="p-2">
      {/* on button click this will call the `toggle` function 
        and changes the theme */}
      <button onClick={toggle} className="border p-2 bg-amber-100 rounded">
        Theme switch
      </button>

      <p className="text-4xl">
        Current theme: <span className="underline text-blue-600">{theme}</span>
      </p>
    </div>
  );
}

Here we are importing the useTheme from our ThemeContext. Inside our ThemeSwitch initiate the useTheme(), and here we can get access of theme and toggle. On button click this triggers the toggle function that we have in our ThemeConntext and changes the theme.

Now in our App.tsx, clear all the boilerplate code, import the ThemeProvider and wrap the ThemeSwitch with that.

// App.tsx

// get the theme provider from theme context
import { ThemeProvider } from "./context/ThemeContext";
// get the theme switch component
import ThemeSwitch from "./components/ThemeSwitch";


const App = () => {
  return (
    <ThemeProvider>
      <ThemeSwitch />
    </ThemeProvider>
  );
};

export default App;

Now run the code and you can see on clicking the button it changes the theme.

To demonstrate this further lets create another component, DemonstrateThemeChange.

// DemonstrateThemeChange.tsx

import { useTheme } from "../context/ThemeContext";

export default function DemonstrateThemeChange() {
  const { theme } = useTheme();

  return (
    <div className="p-2">
      <div
        className={`h-48 w-48 rounded flex justify-center items-center ${
          theme === "light" ? "bg-gray-300" : "bg-black text-white"
        }`}
      >
        <p>{theme}</p>
      </div>
    </div>
  );
}

Here we are importing the useTheme and rendering css according to current theme. Now if you click the ThemeSwitch button you will see that the the DemonstrateThemeChange box color changes without any wrapping. This way you can eliminate props drilling

So, is Context API enough to manage states and share data across an React application? The answer is no.
Context API is great for smaller application to store one or two states, but when the application gets bigger we need a better approach, a better solution to manage states across our application.

Why Context is not recommended for large scale applications :
Re-Renders all consumers: Lets say, that you have context user, that stores user profile info and also user shopping cart details, now if that user add a new item to their cart, user’s shopping cart data will get updated, and this will trigger re-render for both shopping cart data consumer and user profile data consumer.
No built in selector: You can not subscribe to only one part of a context, like I want only user profile data not the shopping cart data. To do this you have split the context which adds complexity.
Provider hell: To deal with above problems, lets say that you have separated your context, but now guess what you have to do deep nesting.

<UserProvider>
  <ThemeProvider>
    <CartProvider>
      <App />  // 🤯 Too many wrappers!
    </CartProvider>
  </ThemeProvider>
</UserProvider>

To solve this we have dedicated state management tools like Redux/Zustand.
By using state management tools like Redux/Zustand you can avoid Unnecessary re-render, provider hello and you can also get built-in optimization.

Get Started with Zustand

Zustand is a small, fast, and scalable state management solution.

To use Zustand you have to install it:

npm install zustand

After installation create a store folder in the src of your project directory and inside that store folder create a useUserStore.ts. Inside our user store file paste:

import { create } from "zustand";
import { persist } from "zustand/middleware";

const useUserStore = create(persist((set) => ({}), {name: "user-store"}))

Here, we are importing create from zustand to create the store, and then we are importing the persist to enable state persistence. You can create a zustand store without using persist, but in that case, the state will be lost when the page is refreshed. The third line is the boilerplate code for creating a zustand store.

If you prefer JS, your are good to go — you can now declare the states inside this useUserStore. Because I am using TS, I will first create a type interface and then use that interface in my store.

import { create } from "zustand";
import { persist } from "zustand/middleware";

// TYPE INTERFACE FOR SHOPPING CART
interface UserShoppingCart {
    productName: string,
    productPrice: string,
    productQty: number
}

// TYPE INTERFACE FOR USER
interface User {
    isLoading: boolean,
    isError: boolean,
    errorMessage: string | null

    // TO STORE VALUE
    isUserLogedIn: boolean,
    userShoppingCart: UserShoppingCart[]

    // FUNCTIONS TO CHANGE VALUE
    changeUserLogedInStatus: ({isLogedIn}:{isLogedIn: boolean}) => void
    addItemToUserShoppingCart: ({productName, productPrice, productQty} : {productName: string, productPrice: string, productQty: number}) => void
}

// OUR STORE
const useUserStore = create(persist<User>((set) => ({
    // PROVIDING THE STATE VARIABLE TO OUR STORE
    isLoading: false,
    isError: false,
    errorMessage: null,

    isUserLogedIn: false,
    userShoppingCart: [],

    changeUserLogedInStatus : ({isLogedIn}) => {},
    addItemToUserShoppingCart: ({productName, productPrice, productQty}) => {},
}), {name: "user-store"}))

// EXPORT THE STORE 
export { useUserStore }

So, above I introduced two type interface, User and UserShoppingCart. These ensures type safety for our state data across different components. After that we provide the state variable to our store with initial values.

Here you can declare as many state variables as you need, like —userSessionId or userShoppingHistory or anything else you need.

Now lets see how we can change value or update value in our store. Lets create two basic components, LoginButton and AddToCartButton — These will be just a normal button, whenever we click this buttons values into our store will get updated. The AddToCartButton will only shown to the user when the isUserLogedIn value is true.

So, lets first complete our store functions which will update our state value

const useUserStore = create(persist<User>((set) => ({
    isLoading: false,
    isError: false,
    errorMessage: null,

    isUserLogedIn: false,
    userShoppingCart: [],

    changeUserLogedInStatus : ({isLogedIn}) => {
        set({isUserLogedIn: isLogedIn})
    },
    addItemToUserShoppingCart: ({productName, productPrice, productQty}) => {
        set((prev) => ({
            userShoppingCart: [...prev.userShoppingCart, {productName, productPrice, productQty}]
        }))
    },
}), {name: "user-store"}))

To update our store with new value we need use the set property. Those two functions are simple JS code, If you find it difficult to understand to can Google them.

Now lets create our component to update user login status.

import { useUserStore } from "../store/useUserStore"

export default function LoginButton(){
    const {changeUserLogedInStatus, isUserLogedIn} = useUserStore()
    return (
        <div className="flex justify-center items-center min-h-[20vh]">
            <button className="border bg-gray-300 active:bg-gray-400"
            onClick={() => {
                changeUserLogedInStatus({isLogedIn: !isUserLogedIn})
            }}
            >Update login status</button>
        </div>
    )
}

I have created a LoginButton component in my component folder and there I have imported the changeUserLogedInStatus and isUserLogedIn(current user login status) from useUserStore and then I am updating the user login status to opposite of current value on button click.

Now remove everything from App.tsx return statement and add the below code.

import LoginButton from "./components/LoginButton";

const App = () => {
  return (
    <div>
      <LoginButton />
    </div>
  );
};

export default App;

Now go to localhost of your app and then your browser’s local storage section then click on the Update login status button and now you will see a new store added to your local storage with the updated userLogedIn status.

Now lets create the AddToCartButton component.

import { useUserStore } from "../store/useUserStore"

export default function AddToCartButton(){
    const {addItemToUserShoppingCart} = useUserStore()
    return (
        <div className="flex justify-center items-center min-h-[30vh]">
            <button
             className="border bg-blue-300 active:bg-blue-400"
             onClick={() => {
                addItemToUserShoppingCart({productName: "Ferrari Roma", productPrice: "4 CR", productQty: 1})
             }}
            >Add to cart</button>
        </div>
    )
}

Create the component in component folder and import the addItemToUserShoppingCart and then add the logic for adding items to shopping cart on button click. But we want this button to be visible only when the user is logged In. To do that we will update our App.tsx.

import AddToCartButton from "./components/AddToCartButton";
import LoginButton from "./components/LoginButton";
import { useUserStore } from "./store/useUserStore";

const App = () => {
  const {isUserLogedIn}=  useUserStore()
  return (
    <div>
      <LoginButton />

      {
        isUserLogedIn && (<AddToCartButton />)
      }
    </div>
  );
};

export default App;

Here we are rendering the AddToCartButton only when the user login status is true. Now if you click the Add to cart button this will add item to your shopping cart.

At the begging the user login status is false and when we click on the login button the status updated as true, now we can see the add to cart button. On clicking the add to cart button this will add the provided item into the shopping cart.

So this is how you can manage states store data and access them across different component using Zustand.

To learn more about Zustand you can refer to Zustand official docs.

Source code is available on GitHub. Also you can provide your feedback on Twitter/X.