StatefulFunction() — react Function Reference

Architecture documentation for the StatefulFunction() function in index.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ StatefulFunction() — react Function Reference

Dependency Diagram

graph TD
  c37835d3_4892_4630_854c_7ddae1c7ea2d["StatefulFunction()"]
  3a02e121_a575_f687_567f_39a3a9f90904["index.js"]
  c37835d3_4892_4630_854c_7ddae1c7ea2d -->|defined in| 3a02e121_a575_f687_567f_39a3a9f90904
  style c37835d3_4892_4630_854c_7ddae1c7ea2d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shell/src/app/EditableProps/index.js lines 39–69

function StatefulFunction({name}: StatefulFunctionProps) {
  const [count, updateCount] = useState(0);
  const debouncedCount = useDebounce(count, 1000);
  const handleUpdateCountClick = useCallback(
    () => updateCount(count + 1),
    [count],
  );

  const [data, dispatch] = useReducer(reducer, initialData);
  const handleUpdateReducerClick = useCallback(
    () => dispatch({type: 'swap'}),
    [],
  );

  return (
    <ul>
      <li>Name: {name}</li>
      <li>
        <button onClick={handleUpdateCountClick}>
          Debounced count: {debouncedCount}
        </button>
      </li>
      <li>
        Reducer state: foo "{data.foo}", bar "{data.bar}"
      </li>
      <li>
        <button onClick={handleUpdateReducerClick}>Swap reducer values</button>
      </li>
    </ul>
  );
}