Guarantees DOM updates before effect execution
Effects are an escape hatch from the React paradigm. If there is no external system involved you shouldn’t need an Effect. When something can be calculated from the existing props or state, don't put it in state. Instead, calculate it during rendering. You can cache or React.memo an expensive calculation by wrapping it in a React useMemo() hook.
It combines componentDidMount, componentDidUpdate, and componentWillUnmount. The double invocation in development environment is intentional by design (implying effects should be resilient to multiple calls).
