title: React worse practice: fatter state or DOM manipulation?
body: <p>I have an <code>&lt;svg /&gt;</code> element into which I render several <code>&lt;g /&gt;</code>s and <code>&lt;circle /&gt;</code>s stored via <code>useState()</code>. The <code>&lt;line /&gt;</code>s are added to and removed from the <code>&lt;svg /&gt;</code> by mutating the DOM directly through <code>append(), removeChild, insertBefore(), etc.</code></p>
  
  <p>Since in React you're not really supposed to mutate the DOM directly, I'm wondering if to switch over to storing the <code>&lt;lines /&gt;</code>s with <code>useState()</code> and rendering them that way (again, just like I'm already doing with my <code>&lt;g /&gt;</code>s and <code>&lt;circles /&gt;</code>s. However, that would increase the amount of state being stored and managed, which should be kept to a minimum according to React best practices (?).</p>
  
  <p>Btw, so far I have been getting away with not storing the <code>&lt;line /&gt;</code>s in the state because, based on their ids, I can query the DOM and calculate the relationships between the elements. This is because I was told to keep state at a minimum. However, a potential pro to storing the <code>&lt;lines /&gt;</code>s in the state would be that the code logic to calculate relationships might be simpler.</p>
  
  <p>So essentially the question is between (A) fattening up the state (and maybe easier relationship lookup) but avoiding direct DOM manipulation vs (B) keeping a smaller state but directly modifying the DOM.</p>