ueStrictLoaderData - Adds a warning to the console for any data sent from the loader and not used

use-strict-loader-data.ts

import { useLoaderData } from "@remix-run/react";
import { useEffect } from "react";

export const useStrictLoaderData = () => {
  const data = useLoaderData();
  const accessed = [] as String[];

  const getAllKeys = (obj: any, path = "") => {
    const keys = [] as String[];

    Object.keys(obj).forEach((k: string) => {
      if (typeof obj[k] === "object") {
        getAllKeys(obj[k], `${path}.${k}`).forEach((sk) => {
          keys.push(sk);
        });
      } else {
        keys.push(`${path}.${k}`);
      }
    });

    return keys;
  };

  const createHandler = (path: string) => {
    return {
      path,
      get(target: any, prop: string, receiver: any) {
        accessed.push(`${path}.${prop}`);
        return Reflect.get(target, prop, receiver);
      },
    };
  };

  const createProxy: any = (obj: any, path = "") => {
    let strictData: any = {};

    Object.keys(obj).forEach((k: string) => {
      if (typeof obj[k] === "object") {
        strictData[k] = createProxy(obj[k], `${path}.${k}`);
      } else {
        strictData[k] = obj[k];
      }
    });

    return new Proxy(strictData, createHandler(path));
  };

  const strictLoaderData = createProxy(data);

  useEffect(() => {
    getAllKeys(data).forEach((k) => {
      if (!accessed.includes(k)) {
        console.warn(
          `useStrictLoaderData: You sent ${k} from the loader but did not use it`,
        );
      }
    });
  });

  return strictLoaderData;
};

This was just for a proof of concept, it needs updating more for full type safety and should full back to just returning useLoaderData when creating a production build.