[Content]: Component Lifecycle diagram and more details

📚 Subject area/topic

Component Lifecycle

📋 Page(s) affected (or suggested, for new content)

https://docs.solidjs.com/concepts/components/basics#component-lifecycles

📋 Description of content that is out-of-date or incorrect

The component lifecycle section is fairly short and only gives a high-level understanding of the topic. With Solid's lifecycle being pretty different from other frameworks and an important concept to understand I think there should be more content dedicated to this that goes more in depth.

• Diagram of the component lifecycle
• Include the lifecycle functions onMount, onCleanup
• When elements are created
• Explanation of how solid schedules updates
• Include when the various effects are run (createEffect, createRenderEffect, createComputed)
• When child components are created
• Refs lifecycle (maybe just when they are attached)

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

These are both just an initial attempt, more work would need to be done ideally from someone who understands these details way better than myself

Excalidraw diagram: https://excalidraw.com/#json=HGJ-iskfFERCO7F1AnRKd,G7Yv0q6qtHM2m12EcObpjw

SolidJS Playground: https://playground.solidjs.com/anonymous/0ed6a0ea-c7a8-4a14-a271-bbf1f446df2e