Home / Function/ Component() — react Function Reference

Component() — react Function Reference

Architecture documentation for the Component() function in destructuring-mixed-scope-declarations-and-locals.js from the react codebase.

Entity Profile

Dependency Diagram

graph TD
  0c8ce8e1_6a5f_12d0_1e46_ec4d4e5f9233["Component()"]
  742a9c10_5e67_9cc0_7f76_32b1526e7907["destructuring-mixed-scope-declarations-and-locals.js"]
  0c8ce8e1_6a5f_12d0_1e46_ec4d4e5f9233 -->|defined in| 742a9c10_5e67_9cc0_7f76_32b1526e7907
  style 0c8ce8e1_6a5f_12d0_1e46_ec4d4e5f9233 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.js lines 3–29

function Component(props) {
  const post = useFragment(
    graphql`
      fragment F on T {
        id
      }
    `,
    props.post
  );
  const allUrls = [];
  // `media` and `urls` are exported from the scope that will wrap this code,
  // but `comments` is not (it doesn't need to be memoized, bc the callback
  // only checks `comments.length`)
  // because of the scope, the let declaration for media and urls are lifted
  // out of the scope, and the destructure statement ends up turning into
  // a reassignment, instead of a const declaration. this means we try to
  // reassign `comments` when there's no declaration for it.
  const {media, comments, urls} = post;
  const onClick = e => {
    if (!comments.length) {
      return;
    }
    console.log(comments.length);
  };
  allUrls.push(...urls);
  return <Media media={media} onClick={onClick} />;
}

Subdomains

Frequently Asked Questions

What does Component() do?
Component() is a function in the react codebase, defined in compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.js.
Where is Component() defined?
Component() is defined in compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.js at line 3.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free