Ever had a hard time debugging a Recoil state update bug?
Try Recoil Inspector to visualize which components are using which states, and get to the source of the bug quickly.
It supports both Next.js 13 and 14.
demo.mp4
- State and Components Visualization ⚛️
- See which components are referencing which Recoil states and props.
- State Changes History ⏺
- See how states have been changed over time. You can compare two changes to see exactly which properties have been updated, deleted, or added.
- Enabled Only On Development Mode
- It is activated only when
process.env.NODE_ENVisdevelopment, and to avoid increasing your application's bundle size, it is lazily loaded only when enabled.
- It is activated only when
-
Install the React Devtool extension if you have not already.
-
Install the NPM package.
npm install recoil-inspector
-
Import the package in your entry point like the below examples.
// layout.ts
// NOTE: "use client" will not be needed in the future. We will keep the "use client" directive in the RecoilInspector component.
'use client';
import { RecoilInspector } from 'recoil-inspector';
if (process.env.NODE_ENV === 'development') {
import('recoil-inspector/public/index.css');
}
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<RecoilRoot>
<body>
<RecoilInspector />
{children}
</body>
</RecoilRoot>
</html>
);
}import { RecoilInspector } from 'recoil-inspector';
if (process.env.NODE_ENV === 'development') {
import('recoil-inspector/public/index.css');
}
export function Layout({ children }: { children: ReactNode }) {
return (
<RecoilRoot>
{children}
<RecoilInspector />
</RecoilRoot>
);
}This project is inspired by many other great devtools, including Redux DevTools, React Developer Tools, Recoil Dev Tools, and Recoilize.