ABSTRACT

Browsers allow us to define event handlers to specify what to do in response to an externally-triggered action, such as a page loading or a user pressing a button. These event handlers are just callback functions that are (usually) given an event object containing information about what happened, and while we can write them in pure JavaScript, they’re even easier to build in React. React calls each component’s render method each time setState is used to update the component’s state. Behind the scenes, React does some thinking to minimize how much redrawing takes place: while it may look as though the paragraph, button, and current count are all being redrawn each time, React will only actually redraw as little as it can. Well-designed applications separate models (which store data) from views (which display it) so that each can be tested and modified independently.