title: react: create dynamic component with state and hook?
body: <p>I've seen a lot of example that render component from JSON dynamically</p>
  
  <p>like this one</p>
  
  <pre><code>// the demo link
  https://codepen.io/hyyan/pen/NmxMqY
  </code></pre>
  
  <p>but the example above only renders some pre-defined components, most of them don't have UI logic</p>
  
  <p>and I am wondering how to create <strong>really</strong> dynamic component with state or hook inside it ?</p>
  
  <p>I am developing a page builder project, I want the user can drag and drop some basic components like text, image, or button, and be able to attatch some extra logic inside the component.</p>
  
  <p>I've read some articles about React Element (don't be confused with Nike shoes =_=), and I am thinking is it possible to do this by construct react elements to make the component has dynamic states and dynamic effects</p>
  
  <p><a href="https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/" rel="nofollow noreferrer">https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/</a></p>