import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    pre: "pre",
    code: "code",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Part of what makes Solid so performant is that our components are basically just function calls. The way we propagate updates is that the compiler wraps potentially reactive expressions in object getters. You can picture the compiler to output:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// this JSX"
        }), "\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComp"
        }), " dynamic={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "()}>\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Child"
            }), " />"]
          })
        }), "\n</", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComp"
        }), ">\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// to become"
        }), "\n", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComp"
        }), "({\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dynamic"
        }), "() { ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "() },\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "children"
        }), "() { ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Child"
        }), "() }\n});\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "This means that these props are evaluated lazily. Their access is deferred until where they are used. This retains reactivity without introducing extraneous wrappers or synchronization. However, it means that repeat access can lead to recreating child components or elements."
    }), "\n", jsx(_components.p, {
      children: "The vast majority of the time you will just be inserting props into the JSX so there is no problem. However, when you work with children, you need to be careful to avoid creating the children multiple times."
    }), "\n", jsxs(_components.p, {
      children: ["For that reason, Solid has the ", jsx(_components.code, {
        children: "children"
      }), " helper. This method both creates a memo around the ", jsx(_components.code, {
        children: "children"
      }), " prop and resolves any nested child reactive references so that you can interact with the children directly."]
    }), "\n", jsxs(_components.p, {
      children: ["In the example, we have a dynamic list and we want to set the items' ", jsx(_components.code, {
        children: "color"
      }), " style property. If we interacted with ", jsx(_components.code, {
        children: "props.children"
      }), " directly, not only would we create the nodes multiple times, but we'd find ", jsx(_components.code, {
        children: "props.children"
      }), " to be a function, the Memo returned from ", jsx(_components.code, {
        children: "<For>"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Instead let's use the ", jsx(_components.code, {
        children: "children"
      }), " helper inside ", jsx(_components.code, {
        children: "colored-list.tsx"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ColoredList"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " c = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "children"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "children"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "{c()}", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Now to update our elements, let's create an Effect:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "c"
        }), "().", jsx(_components.span, {
          className: "hljs-title function_",
          children: "forEach"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: [jsx(_components.span, {
            className: "hljs-params",
            children: "item"
          }), " =>"]
        }), " item.", jsx(_components.span, {
          className: "hljs-property",
          children: "style"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "color"
        }), " = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "color"
        }), "));\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-b7074892.js.map
