Skip to content

class28-401.md

Latest commit

 

History

History
48 lines (26 loc) · 2.82 KB

class28-401.md

File metadata and controls

48 lines (26 loc) · 2.82 KB

Component Lifecycle / useEffect()

Mounting

This is the first lifecycle of a React component, this is the stage where the component is created and inserted into the DOM. In this lifecycle stage, we have the componentDidMount lifecycle method. The componentDidMount lifecycle method happens when your component is mounted

Updating

This lifecycle stage happens after the component is mounted and rendered into the DOM. A React component is updated when we have an update in our props or state

Unmouting

This lifecycle is responsible to do the cleanup in our DOM, especially when we want to remove a component from our DOM, in React this is called unmounting.

We have just one lifecycle method for that lifecycle stage called componentWillUnmount. This lifecycle method will be invoked when the component is about to be removed from the DOM

l

Review, Research, and Discussion

Why do we not need more .html pages in a multi-page React app?

  • becuase the React is a single page application and only contains and renders one HTML page always.

If we wanted a component to show up on every page, where would we put it and why? Outside the Inside the , outside a Inside a

  • will be inside the Route that will be as an instance of BrowserRouter, to allow the React App render needed component that is exisiting inside the Route, and each time the active route “by path” will be rendered

What does routing do with the components that were rendered when a new route is requested in switch component from React-router, first route will match the clicked path will be rendered, and will go out the switch and will not see or render the other components

What does props.children contain?

  • we get props.childern by components composition and contains all props or things that the parent component has in JSX or render region

  • the good thing is will render the children that the component doesn’t know them even

How do useState() and this.setState() differ?

  • setState is merging the previous state with the new one, it means that you dont have to pass the full state object every time you want to change some part of the state. React will update given properties and won’t touch the rest. The useState’s updater rewrites a previous state with a new one and it does not perform any merging. Its just replacement instead of merging

Document the following Vocabulary Terms

State Hook built in function in react that allows you to add and update states to your stateless components.

Mounting and Un-Mounting “mounting” (adding nodes to the DOM) or render the component, “unmounting” (removing them from the DOM) stop render or unrender the component , and “updating” (making changes to nodes already in the DOM) or edit the exist render of component.