no-missing-context-display-name
Enforces that all contexts have a 'displayName' that can be used in DevTools.
Full Name in eslint-plugin-react-x
react-x/no-missing-context-display-nameFull Name in @eslint-react/eslint-plugin
@eslint-react/no-missing-context-display-nameFeatures
🔧
Rule Details
Context displayName property is used by React DevTools to identify the context in the component tree. Without it, debugging becomes difficult as contexts appear as "Context" or "Context.Provider" without any distinguishing information.
Examples
Creating a Context without setting displayName
// Problem: Different contexts cannot be distinguished in React DevTools, making debugging difficult
import React from "react";
const MyContext = React.createContext();Creating a Context and adding displayName
// Recommended: Assign displayName immediately after creating the Context so it can be identified in DevTools
import React from "react";
const MyContext = React.createContext();
MyContext.displayName = "MyContext";Versions
Resources
Further Reading
See Also
react-x/no-missing-component-display-name
Enforces that all components have adisplayNamethat can be used in DevTools.