Comparing Hooks to Render Props

Now that we know how to apply these hooks, let's take a quick look at why such a paradigm shift was required. The idea behind introducing hooks was mainly to improve developer experience. At React Conf 2018, the React team tried to address three main points:

• Make smaller components where logic is easier to understand
• Make components more reusable
• Limit the use of class-based components as they are harder to optimize

After practicing some exercises on how to start using the useState and useEffect hooks with functional components, it might be a good idea to see how hooks actually simplify the design pattern.

To do so, let's take the final component of Exercise 11.01, Displaying an Image with the Toggle Button, which contains code where we built an app that loads and shows an image by pressing a button.

We had a component called <App/> that rendered an <img/> tag:

const App = () => {
 &...