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",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "One of the reasons for fine-grained reactivity in Solid is that it can handle nested updates independently. You can have a list of users and when we update one name we only update a single location in the DOM without diffing the list itself. Very few (even reactive) UI frameworks can do this."
    }), "\n", jsxs(_components.p, {
      children: ["But how do we accomplish this? In the example we have a list of todos in a signal. In order to mark a todo as complete, we would need to replace the todo with a clone. This is how most frameworks work, but it's wasteful as we rerun the list diffing and we recreate the DOM elements as illustrated in the ", jsx(_components.code, {
        children: "console.log"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toggleTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "id"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setTodos"
        }), "(\n    ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "().", jsx(_components.span, {
          className: "hljs-title function_",
          children: "map"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "todo"
          }), ") =>"]
        }), " (todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "id"
        }), " !== id ? todo : { ...todo, ", jsx(_components.span, {
          className: "hljs-attr",
          children: "completed"
        }), ": !todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "completed"
        }), " })),\n  );\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Instead, in a fine-grained library like Solid, we initialize the data with nested Signals like this:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "text"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [completed, setCompleted] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setTodos"
        }), "([...", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "(), { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "id"
        }), ": ++todoId, text, completed, setCompleted }]);\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Now we can update the completion state by calling ", jsx(_components.code, {
        children: "setCompleted"
      }), " without any additional diffing. This is because we've moved the complexity to the data rather than the view. And we know exactly how the data changes."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toggleTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "id"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " todo = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "().", jsx(_components.span, {
          className: "hljs-title function_",
          children: "find"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "t"
          }), ") =>"]
        }), " t.", jsx(_components.span, {
          className: "hljs-property",
          children: "id"
        }), " === id);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (todo) todo.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setCompleted"
        }), "(!todo.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "completed"
        }), "())\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["If you change the remaining references of ", jsx(_components.code, {
        children: "todo.completed"
      }), " to ", jsx(_components.code, {
        children: "todo.completed()"
      }), ", the example should now only run the ", jsx(_components.code, {
        children: "console.log"
      }), " on creation and not when you toggle a todo."]
    }), "\n", jsx(_components.p, {
      children: "This of course requires some manual mapping and it was the only choice available to us in the past. But now, thanks to proxies, we can do most of this work in the background without manual intervention. Continue to the next tutorials to see how."
    })]
  });
}
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-b60b8cf5.js.map
