Component() — react Function Reference

Architecture documentation for the Component() function in ComponentWithCustomHook.js from the react codebase.

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ Component() — react Function Reference

Dependency Diagram

graph TD
  946c159d_99ea_cfce_beef_a55e5547bb42["Component()"]
  79057a9d_fd67_ee74_5a04_2e547d02f7c1["ComponentWithCustomHook.js"]
  946c159d_99ea_cfce_beef_a55e5547bb42 -->|defined in| 79057a9d_fd67_ee74_5a04_2e547d02f7c1
  f8ed7b81_2098_27f1_c492_a5ce0f2b2a71["useIsDarkMode()"]
  946c159d_99ea_cfce_beef_a55e5547bb42 -->|calls| f8ed7b81_2098_27f1_c492_a5ce0f2b2a71
  d44dc15a_7b02_189d_eaf7_5b0141cb09f6["useFoo()"]
  946c159d_99ea_cfce_beef_a55e5547bb42 -->|calls| d44dc15a_7b02_189d_eaf7_5b0141cb09f6
  style 946c159d_99ea_cfce_beef_a55e5547bb42 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithCustomHook.js lines 12–31

export function Component() {
  const [count, setCount] = useState(0);
  const isDarkMode = useIsDarkMode();
  const {foo} = useFoo();

  useEffect(() => {
    // ...
  }, []);

  const handleClick = () => setCount(count + 1);

  return (
    <>
      <div>Dark mode? {isDarkMode}</div>
      <div>Count: {count}</div>
      <div>Foo: {foo}</div>
      <button onClick={handleClick}>Update count</button>
    </>
  );
}