jsxProd() — react Function Reference

Architecture documentation for the jsxProd() function in ReactJSXElement.js from the react codebase.

Function javascript BabelCompiler Validation calls 3

Entity Profile

BabelCompiler→ Validation→ jsxProd() — react Function Reference

Dependency Diagram

graph TD
  541966e9_c9c6_423b_909d_7502d44146b3["jsxProd()"]
  1bf5591f_27a1_c79f_853a_6242549e0e07["ReactJSXElement.js"]
  541966e9_c9c6_423b_909d_7502d44146b3 -->|defined in| 1bf5591f_27a1_c79f_853a_6242549e0e07
  04bd1671_ef17_1a3e_4550_297a31a727d2["hasValidKey()"]
  541966e9_c9c6_423b_909d_7502d44146b3 -->|calls| 04bd1671_ef17_1a3e_4550_297a31a727d2
  9e375f3a_dd2f_18ab_e2b2_0d6efc63b4b6["ReactElement()"]
  541966e9_c9c6_423b_909d_7502d44146b3 -->|calls| 9e375f3a_dd2f_18ab_e2b2_0d6efc63b4b6
  5c6da8c1_f2fa_cf23_63c2_fe9e5615d850["getOwner()"]
  541966e9_c9c6_423b_909d_7502d44146b3 -->|calls| 5c6da8c1_f2fa_cf23_63c2_fe9e5615d850
  style 541966e9_c9c6_423b_909d_7502d44146b3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react/src/jsx/ReactJSXElement.js lines 291–348

export function jsxProd(type, config, maybeKey) {
  let key = null;

  // Currently, key can be spread in as a prop. This causes a potential
  // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
  // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
  // but as an intermediary step, we will use jsxDEV for everything except
  // <div {...props} key="Hi" />, because we aren't currently able to tell if
  // key is explicitly declared to be undefined or not.
  if (maybeKey !== undefined) {
    if (enableOptimisticKey && maybeKey === REACT_OPTIMISTIC_KEY) {
      key = REACT_OPTIMISTIC_KEY;
    } else {
      if (__DEV__) {
        checkKeyStringCoercion(maybeKey);
      }
      key = '' + maybeKey;
    }
  }

  if (hasValidKey(config)) {
    if (enableOptimisticKey && maybeKey === REACT_OPTIMISTIC_KEY) {
      key = REACT_OPTIMISTIC_KEY;
    } else {
      if (__DEV__) {
        checkKeyStringCoercion(config.key);
      }
      key = '' + config.key;
    }
  }

  let props;
  if (!('key' in config)) {
    // If key was not spread in, we can reuse the original props object. This
    // only works for `jsx`, not `createElement`, because `jsx` is a compiler
    // target and the compiler always passes a new object. For `createElement`,
    // we can't assume a new object is passed every time because it can be
    // called manually.
    //
    // Spreading key is a warning in dev. In a future release, we will not
    // remove a spread key from the props object. (But we'll still warn.) We'll
    // always pass the object straight through.
    props = config;
  } else {
    // We need to remove reserved props (key, prop, ref). Create a fresh props
    // object and copy over all the non-reserved props. We don't use `delete`
    // because in V8 it will deopt the object to dictionary mode.
    props = {};
    for (const propName in config) {
      // Skip over reserved prop names
      if (propName !== 'key') {
        props[propName] = config[propName];
      }
    }
  }

  return ReactElement(type, key, props, getOwner(), undefined, undefined);
}