DEV Community: Arkadiusz Pawlak

Next.js shallow search params routing

Arkadiusz Pawlak — Mon, 24 Mar 2025 20:56:05 +0000

If you ever used Pages Router from Next.js you might be familiar with an ability to do shallow navigation, in App Router this option is gone from router hooks. Currently when you change anything in URL it goes to the Next.js server everytime, it might be unnecessary in cases for example when you have some client only components that does not render on server, but you still want to persist the state in URL (and you probably should do pretty much always, it enhances UX), to prevent that you have to find a magic trick...

And the trick is... just use plain old browser native History API, easier said than done but let's see...

// root page.tsx
import { Suspense } from 'react';
import { ShallowParams } from './shallow-params';

// simple counter so you will clearly see that another
// roundtrip to server occured
let serverRenderCount = 0;

export default async function Home() {
  console.log('Server run', serverRenderCount++);

  return (
    <div className="flex flex-col">
      {/* Suspense is needed because we are using useSearchParams hook which would fallback Next.js to dynamic rendering always */}
      <Suspense>
        <ShallowParams />
      </Suspense>
    </div>
  );
}

// shallow-params.tsx

'use client';

import { useRouter, useSearchParams } from 'next/navigation';

export function ShallowParams() {
  // useSearchParams updates state even if we use History API
  const params = useSearchParams();
  const router = useRouter();

  const count = +(params.get('count') || 0);
  return (
    <div className="flex flex-col gap-2">
      <p>{params.get('count') || 0}</p>

      <button
        className="btn"
        onClick={() => {
          // shallow increase count params via the push. Check the browser back and forward buttons.
          window.history.pushState({}, '', `/?count=${count + 1}`);
        }}
      >
        Add to count +1 (push)
      </button>
      <button
        className="btn"
        onClick={() => {
          // shallow increase count params via the replace. Check the browser back and forward buttons, the history was overridden
          window.history.replaceState({}, '', `/?count=${count + 5}`);
        }}
      >
        Add to count +5 (replace)
      </button>
      <button
        className="btn"
        onClick={() => {
          // and this is a normal router action, in the server console you will see the serverRenderCount increase and log, with above methods it won't log anything.
          router.push(`/?count=${count + 10}`);
        }}
      >
        Add to count +10 (Next.js router push)
      </button>
    </div>
  );
}

And that's pretty much it. Here is a link to StackBlitz sandbox you can play with the example from above

You can build abstractions around it and do whatever you want with shallow routing. For simple things it would be okay to use History API directly, but as always web development have many rough edge cases that would pop out at the least expected moment, that said, there is an excellent library out there called nuqs it makes search params first class citizen in Next.js (and other frameworks also!) and makes sure you won't encounter those rough edge cases.

That's it for today. Take a look at my other articles where I share some nice tricks!

Stop using framework specific component. Use this instead...

Arkadiusz Pawlak — Thu, 13 Feb 2025 18:16:14 +0000

Pretty much every JS framwork today has a special <Link> component which wraps HTML <a> to enrich user experience while navigating around the pages (expect SvelteKit, which we will cover later).

Where this pattern fall apart?

You are rendering HTML from CMS's Rich text editor, anchors in this rendered HTML is not covered with magic that applies for <Link> components. To support it you would need to parse that HTML, which wouldn't be easy.
You would like to create a shared UI library for React which would be used in different frameworks like Remix, Next.js, TanStack Start. To support rendering <Link> components you would need some kind of EnvironmentContext or render functions.
Legacy library support which renders anchor tags without any way to enrich them with client side navigations.

One framework does it right and does not give you any special <Link> component. This framework is SvelteKit and it is the inspiration for this article.

In SvelteKit you just render the plain HTML <a> tag and you are good to go! It is such a no brainer that it insipired me to look into the SvelteKit sources and check how it is done there. It didn't look too complex so I decided to port it to Next.js.

But first, how it is working?

The whole trick is based on browser events bubbling up the tree. You just set the listener on the document element and listen for click events and then you check whether it is a an anchor tag, it is not external and other checks. There are actually lot of things to check, but you will see it in the code example.

It is filled with comments with explanations... They start with // EXPL

"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useLayoutEffect, useState } from "react";

export const origin = typeof window !== "undefined" ? location.origin : "";
// EXPL: if your app lives on a subpath you have to add it here...
export const base = ""; // or for example "/basepath"

export const PRELOAD_PRIORITIES = {
  tap: 1,
  hover: 2,
  viewport: 3,
  eager: 4,
  off: -1,
  false: -1,
} as const;

const levels = {
  ...PRELOAD_PRIORITIES,
  "": PRELOAD_PRIORITIES.hover,
};

export function stripHash({ href }: { href: string }) {
  return href.split("#")[0];
}

// EXPL: just tests if the URL is external one so we should do pure classic navigation
export function isExternalUrl(url: URL, base: string) {
  if (url.origin !== origin || !url.pathname.startsWith(base)) {
    return true;
  }

  return false;
}

// EXPL: gets all necessary info about anchors attributes and computes some important booleans and values...
export function getLinkInfo(a: HTMLAnchorElement | SVGAElement, base: string) {
  let url: URL | undefined;

  try {
    url = new URL(
      a instanceof SVGAElement ? a.href.baseVal : a.href,
      document.baseURI
    );
  } catch {}

  const target = a instanceof SVGAElement ? a.target.baseVal : a.target;

  const external =
    !url ||
    !!target ||
    isExternalUrl(url, base) ||
    (a.getAttribute("rel") || "").split(/\s+/).includes("external");

  const download = url?.origin === origin && a.hasAttribute("download");

  return { url, external, target, download };
}

function parentElement(element: Element) {
  let parent = element.assignedSlot ?? element.parentNode;

  // @ts-expect-error handle shadow roots
  if (parent?.nodeType === 11) parent = parent.host;

  return parent as Element;
}

// EXPL: if you would click on img tag inside an <a> tag the event target would be that img so you have to traverse the tree to find actual <a> tag...
export function findAnchor(element: Element, target: Element) {
  while (element && element !== target) {
    if (
      element.nodeName.toUpperCase() === "A" &&
      element.hasAttribute("href")
    ) {
      return element as HTMLAnchorElement | SVGAElement;
    }

    element = parentElement(element) as Element;
  }
}
// EXPL: just for typesafety
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const validLinkOptions = {
  preload: ["", "off", "false", "tap", "hover", "eager", "viewport"],
  noscroll: ["", "true", "off", "false"],
  reload: ["", "true", "off", "false"],
  replace: ["", "true", "off", "false"],
} as const;

type ValidLinkOptions = typeof validLinkOptions;
type ValidLinkOptionKeys = keyof ValidLinkOptions;

// EXPL: Like SvelteKit it support configuration via the data attributes, here is how the data attribute should be named.
function linkOption<T extends ValidLinkOptionKeys>(element: Element, name: T) {
  const value = element.getAttribute(`data-linky-${name}`) as
    | ValidLinkOptions[T][number]
    | null;

  return value;
}

// EXPL: here you extract all the parameters that could be present on the a tag. SvelteKit has more there but Next.js router has less options so I removed few of there. Also pay attention to that while loop, this pattern support setting those router parameters in a parent elements and those are inherited. That's why the default behaviors are configured on the <body> element
export function getRouterOptions(element: HTMLAnchorElement | SVGAElement) {
  let noscroll: ValidLinkOptions["noscroll"][number] | null = null;

  let preload: ValidLinkOptions["preload"][number] | null = null;

  let reload: ValidLinkOptions["reload"][number] | null = null;

  let replace: ValidLinkOptions["replace"][number] | null = null;

  let el = element as Element;

  while (el && el !== document.documentElement) {
    if (preload === null) preload = linkOption(el, "preload");
    if (noscroll === null) noscroll = linkOption(el, "noscroll");
    if (reload === null) reload = linkOption(el, "reload");
    if (replace === null) replace = linkOption(el, "replace");

    el = parentElement(el);
  }

  function getOptionState(value: string | null) {
    switch (value) {
      case "":
      case "true":
        return true;
      case "off":
      case "false":
        return false;
      default:
        return undefined;
    }
  }

  return {
    preload: levels[preload ?? "off"],
    noscroll: getOptionState(noscroll),
    reload: getOptionState(reload),
    replace: getOptionState(replace),
  };
}

// EXPL: You have to handle scrolling to elements via ids
function scrollToHash(a: HTMLAnchorElement | SVGAElement, hash: string) {
  if (
    hash === "" ||
    (hash === "top" && a.ownerDocument.getElementById("top") === null)
  ) {
    window.scrollTo({ top: 0 });
  } else {
    const element = a.ownerDocument.getElementById(decodeURIComponent(hash));
    if (element) {
      element.scrollIntoView();
      element.focus();
    }
  }
}

// EXPL: container on which you will listen for events. Function there is needed to prevent errors
const container = () => document?.documentElement;

// EXPL: this is the main handler for event.
const handleClick = async (
  event: MouseEvent,
  router: {
    push: (url: string, options: { scroll: boolean }) => void;
    replace: (url: string, options: { scroll: boolean }) => void;
  }
) => {
  // Adapted from https://github.com/visionmedia/page.js
  // MIT license https://github.com/visionmedia/page.js#license
  if (event.button || event.which !== 1) return;
  if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
  if (event.defaultPrevented) return;

  const a = findAnchor(event.composedPath()[0] as Element, container());
  if (!a) return;

  // EXPL: Next.js components are marked with this data attribute so we     don't interfere with it
  if (a.hasAttribute("data-next-link")) {
    return;
  }

  const { url, external, target, download } = getLinkInfo(a, base);
  if (!url) return;

  if (target === "_parent" || target === "_top") {
    if (window.parent !== window) return;
  } else if (target && target !== "_self") {
    return;
  }

  const options = getRouterOptions(a);
  const isSvgAElement = a instanceof SVGAElement;

  // Ignore URL protocols that differ to the current one and are not http(s) (e.g. `mailto:`, `tel:`, `myapp:`, etc.)
  // This may be wrong when the protocol is x: and the link goes to y:.. which should be treated as an external
  // navigation, but it's not clear how to handle that case and it's not likely to come up in practice.
  // MEMO: Without this condition, firefox will open mailer twice.
  // See:
  // - https://github.com/sveltejs/kit/issues/4045
  // - https://github.com/sveltejs/kit/issues/5725
  // - https://github.com/sveltejs/kit/issues/6496
  if (
    !isSvgAElement &&
    url.protocol !== location.protocol &&
    !(url.protocol === "https:" || url.protocol === "http:")
  )
    return;

  if (download) return;

  const [nonhash, hash] = url.href.split("#");
  const samePathname = nonhash === stripHash(location);

  if (external || (options.reload && (!samePathname || !hash))) {
    return;
  }

  // Check if new url only differs by hash and use the browser default behavior in that case
  // This will ensure the `hashchange` event is fired
  // Removing the hash does a full page navigation in the browser, so make sure a hash is present
  if (hash !== undefined && samePathname) {
    // If we are trying to navigate to the same hash, we should only
    // attempt to scroll to that element and avoid any history changes.
    // Otherwise, this can cause Firefox to incorrectly assign a null
    // history state value without any signal that we can detect.
    const [, current_hash] = location.href.split("#");
    if (current_hash === hash) {
      event.preventDefault();

      // We're already on /# and click on a link that goes to /#, or we're on
      // /#top and click on a link that goes to /#top. In those cases just go to
      // the top of the page, and avoid a history change.
      scrollToHash(a, hash);

      return;
    }

    event.preventDefault();
    window.history[options.replace ? "replaceState" : "pushState"](
      null,
      "",
      url.href
    );
    scrollToHash(a, hash);

    return;
  }

  event.preventDefault();

  // allow the browser to repaint before navigating —
  // this prevents INP scores being penalised
  await new Promise((fulfil) => {
    requestAnimationFrame(() => {
      setTimeout(fulfil, 0);
    });

    setTimeout(fulfil, 100); // fallback for edge case where rAF doesn't fire because e.g. tab was backgrounded
  });

  router[options.replace ? "replace" : "push"](url.href, {
    scroll: !options.noscroll,
  });
};

// EXPL: this pattern also support the preloading of pages, same as SvelteKit
function setupPreload(preloadFn: (url: string) => void) {
  let mouseMoveTimeout: NodeJS.Timeout | null = null;
  let currentA: Element | null = null;

  container().addEventListener("mousemove", (event) => {
    const target = event.target as Element;
    if (target.hasAttribute("data-next-link")) {
      return;
    }

    if (mouseMoveTimeout) {
      clearTimeout(mouseMoveTimeout);
    }
    mouseMoveTimeout = setTimeout(() => {
      preload(target, 2);
    }, 20);
  });

  function tap(event: Event) {
    if (event.defaultPrevented) return;
    if ((event.target as Element).hasAttribute("data-next-link")) {
      return;
    }
    preload(event.composedPath()[0] as Element, 1);
  }

  container().addEventListener("mousedown", tap);
  container().addEventListener("touchstart", tap, { passive: true });

  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          preloadFn((entry.target as HTMLAnchorElement).href);
          observer.unobserve(entry.target);
        }
      }
    },
    { threshold: 0 }
  );

  function getFullPath(url: URL | Location) {
    return url.pathname + (url.search || "");
  }

  async function preload(element: Element, priority: number) {
    const a = findAnchor(element, container());
    if (!a || a === currentA) return;

    currentA = a;

    const { url, external, download } = getLinkInfo(a, base);
    if (external || download) return;

    const options = getRouterOptions(a);

    // we don't want to preload data for a page we're already on
    const sameUrl = url && getFullPath(location) === getFullPath(url);

    if (!options.reload && !sameUrl && url) {
      if (priority <= options.preload) {
        preloadFn(getFullPath(url));
      }
    }
  }

  // EXPL: this is invoked on every page change
  function afterNavigate() {
    observer.disconnect();

    for (const a of container().querySelectorAll("a")) {
      const { url, external, download } = getLinkInfo(a, base);
      if (a.hasAttribute("data-next-link")) {
        return;
      }
      if (external || download) continue;

      const options = getRouterOptions(a);
      if (options.reload) continue;

      if (options.preload === PRELOAD_PRIORITIES.viewport) {
        observer.observe(a);
      }

      if (url && options.preload === PRELOAD_PRIORITIES.eager) {
        preloadFn(getFullPath(url));
      }
    }
  }

  return { afterNavigate };
}

const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;

// EXPL: just a component which return null. Remember to wrap it with <Suspense> as useSearchParams hook will opt out you from the static rendering.
export const LinkListener = () => {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [preloadSetup] = useState(() => {
    if (typeof window === "undefined") {
      return null;
    }

    return setupPreload((...args) => {
      router.prefetch(...args);
    });
  });

  useEffect(() => {
    const handle = (event: MouseEvent) => handleClick(event, router);

    document.body.addEventListener("click", handle);

    return () => {
      document.body.removeEventListener("click", handle);
    };
  }, [router]);

  const fullUrl =
    pathname + (searchParams.size > 0 ? "?" : "") + searchParams.toString();

  // EXPL: run it on every page change
  useIsomorphicLayoutEffect(() => {
    preloadSetup?.afterNavigate();
  }, [fullUrl, preloadSetup]);

  return null;
};

That's the whole clue about this pattern. For it to work with Next.js you would need also data-linky-preload="hover" on body element

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        data-linky-preload="hover"
      >
        {children}
      </body>
    </html>
  );
}

Also you need a wrapper component around Next.js <Link> component to apply that special data attribute and also to globally configure prefetching so you won't kill your server right away when few users enters your page

import React, { ComponentPropsWithRef } from "react";
import NextLink from "next/link";

export const Link = (props: ComponentPropsWithRef<typeof NextLink>) => {
  return <NextLink prefetch={false} {...props} data-next-link />;
};

Here you have the link to the playground so you can play with it: StackBlitz

This whole article was inspired by SvelteKit and how it is implemented here. The code from source, was adjusted so it would work with Next.js and possibly other frameworks in the future!

Swapable React context without breaking Rules of Hooks and your neck

Arkadiusz Pawlak — Wed, 15 Jan 2025 18:25:52 +0000

I bet that somewhere in your React project codebase, you’ve encountered this type of code:

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

interface ThemeContext {
  theme: string;
  setTheme: (theme: string) => void;
}

const ThemeContext = createContext<ThemeContext | null>(null);

interface ThemeContextProviderProps {
  children: React.ReactNode;
}

export const ThemeContextProvider = ({ children }: ThemeContextProviderProps) => {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

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

  if (!ctx) throw new Error("No ctx found");

  return ctx;
};

When using TypeScript, we often assert the context value in the useTheme hook to avoid TypeScript warnings about potential null values. However, this pattern hides the ThemeContext instance itself, which can be crucial in certain scenarios, as we’ll see in this article.

Problem

In one of my projects, I had a table component with sortable columns. Each sorting component needed access to search parameters which was handled by React context up in the tree.

This table component was used across multiple views, some of them had a special ParamsContext implementation. Example:

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

interface MostUsedContextType {
  params: {
    query: string;
    page: number;
    sortBy?: string;
    sortOrder?: string;
  };
  setParams: (params: MostUsedContextType["params"]) => void;
}

const MostUsedContext = createContext<MostUsedContextType | null>(null);

const MostUsedContextProvider = ({ children }: { children: ReactNode }) => {
  const [params, setParams] = useState<MostUsedContextType["params"]>({
    // asume that it is from the URL
    query: "",
    page: 1,
    sortBy: undefined,
    sortOrder: undefined,
  });

  return (
    <MostUsedContext.Provider value={{ params, setParams }}>
      {children}
    </MostUsedContext.Provider>
  );
};

function useMostUsedContext() {
  const ctx = useContext(MostUsedContext);

  if (!ctx) throw new Error("No ctx found");

  return ctx;
}

// special context

interface SpecialContextType {
  params: {
    query: string;
    page: number;
    sortBy?: string;
    range: "all" | "week" | "month" | "year";
    date?: string;
    sortOrder?: string;
  };
  setParams: (params: SpecialContextType["params"]) => void;
}

const SpecialContext = createContext<SpecialContextType | null>(null);

const SpecialContextProvider = ({ children }: { children: ReactNode }) => {
  const [params, _setParams] = useState<SpecialContextType["params"]>({
    // asume that it is from the URL
    query: "",
    range: "all",
    date: undefined,
    page: 1,
    sortBy: undefined,
    sortOrder: undefined,
  });

  const setParams = (params: SpecialContextType["params"]) => {
    const newParams = {
      ...params,
    };

    // some aditional logic

    _setParams(newParams);
  };

  // more special logic

  return (
    <SpecialContext.Provider value={{ params, setParams }}>
      {children}
    </SpecialContext.Provider>
  );
};

function useSpecialContext() {
  const ctx = useContext(SpecialContext);

  if (!ctx) throw new Error("No ctx found");

  return ctx;
}

In example above you can see that one context is just handling params and the other one is doing more business logic. Using useMostUsedContext in mentioned sorting component will limit it's flexibility. So I had to find more flexible approach:

What are the options?

Higher-Order Component (HOC)
Using the useParams hook in the parent component
Render props pattern
Passing a hook as props (?)
Passing the context instance as prop

Let’s discuss each approach with examples. First, we define a base ParamsContext and Sorting component so we can work on something together:

interface ParamsContextType {
  params: {
    sortBy?: string;
    sortOrder?: string;
    page?: number;
    pageSize?: number;
    search?: string;
  };
  setParams: (params: ParamsContextType["params"]) => void;
}

const ParamsContext = createContext<ParamsContextType | null>(null);

interface ParamsContextProviderProps {
  children: ReactNode;
}

export const ParamsContextProvider = ({
  children,
}: ParamsContextProviderProps) => {
  const [params, setParams] = useState<ParamsContextType["params"]>({
    sortBy: undefined,
    sortOrder: undefined,
  });

  return (
    <ParamsContext.Provider value={{ params, setParams }}>
      {children}
    </ParamsContext.Provider>
  );
};

export const useParams = () => {
  const ctx = useContext(ParamsContext);

  if (!ctx) throw new Error("No ctx found");

  return ctx;
};

// Sorting.tsx

function Sorting({
  params,
  setParams,
  sortKey,
}: {
  params: {
    sortBy?: string;
    sortOrder?: string;
  };
  setParams: (params: { sortBy?: string; sortOrder?: string }) => void;
  sortKey: string;
}) {
  return <div>Sorting</div>;
}

Higher-Order Component (HOC)

A classic way to handle this scenario is to create a wrapWithContext function. For each variation of the ParamsProvider, you create a separate component wrapped with the specific context:

function wrapWithContext<
  T extends Record<PropertyKey, any>,
  P extends Record<PropertyKey, any>
>(InjectableContext: Context<T | null>, Component: ComponentType<P>) {
  return (props: Omit<ComponentPropsWithoutRef<typeof Component>, keyof T>) => {
    const ctx = useContext(InjectableContext); // use(InjectableContext)

    if (!ctx) throw new Error("No ctx found");

    const p = {
      ...props,
      ...ctx,
    } as unknown as P;

    return <Component {...p} />;
  };
}

const SortingWithParams = wrapWithContext(ParamsContext, Sorting);

export default function View() {
  return (
    <ParamsContextProvider>
      <SortingWithParams sortKey="firstName" />
    </ParamsContextProvider>
  );
}

This approach is flexible — you can pass any context instance to the HOC. However, it can lead to excessive component variables as your project grows, creating unnecessary duplication.

Using the `useParams` Hook in the Parent

This one is simple. In parent component where you render Sorting component, just use useParams hook and pass all required props to Sorting component. There are cases where it is not possible, for example in render functions in which you cannot invoke hooks.

function View2() {
  const ctx = useParams();

  return (
    <Sorting
      params={ctx.params}
      setParams={ctx.setParams}
      sortKey="firstName"
    />
  );
}

function Providers() {
  return (
    <ParamsContextProvider>
      <View2 />
    </ParamsContextProvider>
  );
}

// -------------------------------------

import { createColumnHelper } from "@tanstack/react-table";

const helper = createColumnHelper<SomeType>();

const defaultColumns = [
  helper.display({
    id: "firstName",
    cell: (props) => {
      return <Text>{props.row.original.firstName}</Text>;
    },
    header: () => {
      const ctx = useParams(); // ❌ this is not a component -> invalid hook call!

      return (
        <Sorting
          params={ctx.params}
          setParams={ctx.setParams}
          sortKey="firstName"
        >
          First Name
        </Sorting>
      );
    },
  }),
];

In the end it's not that flexible, you cannot use useParams hook in the same component where you render provider and in the second example with table you have to create wrapper component to fix that hook call (or use other approaches from this article).

Render Props Pattern

The render props pattern introduces a flexible and reusable way to inject context:

const InjectParamsContext = ({
  children,
}: {
  children: (ctx: ParamsContextType) => ReactNode;
}) => {
  const ctx = useParams();

  return children(ctx);
};

// or

const InjectContext = <T,>({
  Context,
  children,
}: {
  Context: Context<T>;
  children: (ctx: NonNullable<T>) => ReactNode;
}) => {
  const ctx = useContext(Context);

  if (!ctx) throw new Error("No ctx found");

  return children(ctx);
};

function View3() {
  return (
    <InjectContext Context={ParamsContext}>
      {(ctx) => (
        <Sorting
          params={ctx.params}
          setParams={ctx.setParams}
          sortKey="firstName"
        />
      )}
    </InjectContext>
  );
}

As you can see we create a dedicated or generic "injector". What's important in this example is that you might find it similar to using just a hook, but there is one big difference, components with render props are swappable, you could just make a ternary oprator in View3 component and pass different context instance to injector or use different dedicated injector. For new React devs it might look a bit too verbose at first but many libraries use render props pattern with success (Ark UI). To sum up, it is very flexible, you can use it in column header from above example. However you have to write a lot of code and the syntax is not that easy to write with your fingers.

Passing hook as props (?)

A tempting idea could be to just pass a hook as a prop to component that resolves context... but it breaks Rules of Hooks and ESlint will complain. The main reason is that those are just props which can change over time therefore you would get an error like "Conditionally rendered hook" which is forbidden in this world. You could get out with this if this prop never change and mark it as readonly or something in TypeScript:

/* eslint-disable react-compiler/react-compiler */
import { createContext, ReactNode, useContext } from "react";

const SomeContext = createContext<{ val: number; val2: string } | null>(null);

const Provider1 = ({ children }: { children: ReactNode }) => {
  return (
    <SomeContext
      value={{
        val: 1,
        val2: "random",
      }}
    >
      {children}
    </SomeContext>
  );
};

const use1Context = () => {
  const ctx = useContext(SomeContext);

  if (!ctx) throw new Error("No ctx found");

  return ctx;
};

export default function MyApp() {
  return (
    <Provider1>
      <Consumer useInjectedContext={use1Context} />
    </Provider1>
  );
}

export const Consumer = ({
  useInjectedContext,
}: {
  useInjectedContext: () => { val: number; val2: string };
}) => {
  const { val, val2 } = useInjectedContext();

  return (
    <>
      {val}
      {val2}
    </>
  );
};

It is flexible enough for me but still quite risky, even though, according to the React devtools, this Consumer component was optimized by the React Compiler (version 19.0.0-beta-63e3235-20250105)! Proof is provided in the screenshot below.

You can see that MyApp wasn't optimized but I think there is just nothing to optimize and I tested it without the hook as props injection and it was still not optimized. So as long as this passed hook stays always the same, I'm okay with it.

Passing context instance as props

Now the last option and one that I finally used with that project I mentioned above. You prepare a special useContext hook that will check for Provider existance based on provided context instance in parameter to get rid of null value and the consumer component will use it, not a wrapper or parent!:

// special useContext wrapper hook
function useSafeContext<T>(Context: Context<T>) {
  const ctx = useContext(Context);

  if (!ctx) throw new Error("No ctx found");

  return ctx;
}

// we modify the Sorting component to use the new
// hook or we can just create a onetime wrapper
// for it
function SortingImproved({
  sortKey,
  Context,
}: {
  sortKey: string;
  Context: Context<{
    params: { sortBy?: string; sortOrder?: string };
    setParams: (params: { sortBy?: string; sortOrder?: string }) => void;
  } | null>;
}) {
  const ctx = useSafeContext(Context);

  return <div>Sorting</div>;
}

// just pass the context that meet component type constraints
function View4() {
  return (
    <ParamsContextProvider>
      <SortingImproved sortKey="firstName" Context={ParamsContext} />
    </ParamsContextProvider>
  );
}

In my opinion, it is a very powerful pattern, though mainly suited for niche use cases. Nevertheless, it is worth knowing. It is also React Compiler-safe, and, what's more, you can utilize the new use function from React 19. This function can replace the useContext hook in all cases and has a significant advantage: it can be rendered conditionally. In the future, it may even be used within the useMemo hook to prevent unnecessary re-renders, which often occur with React contexts.

Conclusion

React context offers a lot of flexibility, especially when combined with the patterns discussed. However, be cautious of performance bottlenecks caused by frequent re-renders. For complex state management needs, consider alternatives like TanStack Store or Zustand.

Everything here was tested on React@19

Thanks for reading! I hope you found this article helpful.

Feel free to connect with me on X or LinkedIn.