Lesson 4. What are hooks anyway? 1. How React renders a component without hooks

Let’s consider this component example, which doesn’t involve hooks:

const WithoutHooks = ({ name }) => {
  return <p>Hello {name}!</p>
}

Since this component is a function, React renders the component (or more precisely knows what to render) by invoking this function with the props. When the props (i.e., name) are changed, the function is called again to get the new rendering result.

If we suppose the name was initially “John” and changed to “Jane”, we can describe the renderings like this:

// Rendering 1
return <p>Hello John!</p>

// Prop `name` changed
//  ↓
// Rendering 2
return <p>Hello Jane!</p>

Now let’s see what happens when we introduce a local state with the useState hook.