propsand based on that return JSX element. They have no internal state, very little (or none at all) logic.
Clickercomponent and split it into a smart and a dumb component:
Clickernow 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.
ClickerContaineronly knows how to update the state in reaction to the
incrementClicksevent. 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.