props
and based on that return JSX element. They have no internal state, very little (or none at all) logic.Clicker
component and split it into a smart and a dumb component:Clicker
now is only concerned about the UI - how the clicker looks. It has clearly defined API, can be changed completely, without risking breaking any logic related to state or potential side-effects. It can be reused by another component, that does something entirely different when the button is clicked.ClickerContainer
only knows how to update the state in reaction to the incrementClicks
event. More abstract application of this pattern is called Higher Order Components or HOC and is a primary (little outdated) tool for sharing code among React components.