React Hooks are based on the same fundamental principles as React. They try to encapsulate state management by using existing JavaScript features. As a result, we do not need to learn and understand specialized React features anymore; we can simply tap into our existing JavaScript knowledge in order to use Hooks.

Using Hooks, we can solve all the previously mentioned problems. We do not need to use class components anymore, because Hooks are simply functions that can be called in function components. We also do not need to use higher-order components and render props for contexts anymore, because we can simply use a Context Hook to get the data that we need. Furthermore, Hooks allow us to reuse stateful logic between components, without creating higher-order components.

For example, the aforementioned problems with life cycle methods could be solved using Hooks, as follows:

function Example ({ name }) {
    useEffect(() => {
        fetch(`http://my.api/${this.props.name}`)
            .then(...)
    }, [ name ])
    // ...
}

The Effect Hook that was implemented here will automatically trigger when the component mounts, and whenever the name prop changes.

Furthermore, the wrapper hell that was mentioned earlier could also be solved using Hooks, as follows:

    const user = useContext(AuthenticationContext)
    const language = useContext(LanguageContext)
    const status = useContext(StatusContext)

Now that we know which problems Hooks can solve, let's get started using Hooks in practice!