React reconciliation: how it works and why should we care

Looking in detail into how React reconciliation algorithm works. Explore in the process quirks of conditional rendering, the ’key’ attribute, and why we shouldn’t declare components inside other components. The video includes: * The mystery of conditional rendering * Exploring how Reconciliation works by walking through the mystery and the solutions * The “key“ attribute, what is its purpose in the algorithm, and how to make use of it outside of dynamic lists * Declaring components inside other components: why it’s a bad practice and how React behaves when it sees code like this 👩🏼‍💻 Code examples for the video: * The mystery of conditional rendering: * How to fix it with re-positioning: * Dynamic arrays and keys: * How to fix the mystery with keys: * How to force re-use of inputs with the same key: Useful articles to read on the topic: 📍 React reconciliation: how it works and why should we care: 📍 React key attribute: best practices for performant lists: Social links: ⃗💬 Twitter: 💬 Linkedin: #react #reactjs #webdevelopment #programming #frontend #frontenddeveloper