Learn React Hooks for Frontend Development/

...

/

Updating a Hook at the Mount

Updating a Hook at the Mount

Learn how React manages and utilizes Hooks for function component updates.

We'll cover the following...

Updating a function component

React updates a function component through an updateFunctionComponent function. The input arguments accept a Component function and its props input:

function updateFunctionComponent(Component, props) {
  // Initializing the previous hook to null (assumes it's used for managing state in the component)
  prevHook = null;
  // Invoking the function component to get its children
  let children = Component(props);
}
Updating the Fiber tree

The main job of the update function is to invoke Component (props) to know the new children element. Taking a Title component as an example, when it gets to be updated, the updateFunctionComponent function invokes Title(). With that, the engine compares the element returned and what's on the screen and commits the ...