⇠ chan.dev/ lessons/ reactholiday / 2023

React has trust issues, 2023

React Has Trust Issues

React’s core innovation is distrust of the DOM. Other UI libraries have a fairly trusting relationship with the DOM. They coordinate via reads and writes. React does not have this same trusting relationship and defaults to write-only.

React, dominating the DOM. Who's the DOM now?

But we have to read information from the DOM eventually. The DOM is where user input, rendered element size, and document events originate. We need that information. Specifically, we need the rendered element height to properly animate our ShowMore component. React exposes explicit hooks for coordination. One of these is DOM refs. Refs do a lot in React. But, for now, we just need them to read element height from the dirty, deceptive, dangerous DOM. Assignment Read the React docs on Manipulating the DOM with Refs. Then take what you’ve learned to read, and log, the scrollHeight of your rendered ShowMore component text. You should see different values when the element expanded and collapsed. (For this assignment, simply log the value, onClick). Yesterday’s solution Watch my first assignment build on YouTube.

chan