>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3539693. --> Reported by: [larowlan](https://www.drupal.org/user/395439) Related to !321 !323 !322 !288 !1447 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>One of the rules of react is that <a href="https://react.dev/reference/rules/components-and-hooks-must-be-pure">Components and Hooks must be pure</a></p> <p>From that documentation</p> <blockquote><p>One of the key concepts that makes React, React is purity. A pure component or hook is one that is: ... </p> <p>Does not mutate non-local values: Components and Hooks should never modify values that aren&rsquo;t created locally in render.</p></blockquote> <p>However, in <code>InputBehaviorsCommon</code> we're mutating the attributes prop</p> <pre>// If the input is not explicitly set as uncontrolled, its state should<br>&nbsp;&nbsp;&nbsp; // be managed by React.<br>&nbsp;&nbsp;&nbsp; attributes.value = inputValue;</pre><p>This means if a component value is changed in the store, the component doesn't update<br> inputBehavioursCommon overwrites the passed value prop, meaning the component doesn't update if value changes</p> <p>The code here was lifted from one of the approaches in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3533703" title="Status: Closed (fixed)">#3533703: Calling the `setPageData` action creator directly doesn't update values in the page data form</a></span></p> <p>This was part of the reason why <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3538576" title="Status: Closed (fixed)">#3538576: Provide a way to programmatically add component with custom values + update values of an existing component</a></span> had to do as much work as it did, particularly <code>updateExistingComponentValues</code></p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Don't mutate the attributes prop.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3 id="summary-ui-changes">User interface changes</h3> <h3 id="summary-introduced-terminology">Introduced terminology</h3> <h3 id="summary-api-changes">API changes</h3> <h3 id="summary-data-model-changes">Data model changes</h3> <h3 id="summary-release-notes">Release notes snippet</h3> > Related issue: [Issue #3533703](https://www.drupal.org/node/3533703)