reading-notes

reading notes for code fellows

---

Project maintained by dLeigh01 Hosted on GitHub Pages — Theme by mattgraham

State and Props

The difference between state and props will be very important to know when it comes to figuring out which one needs to be used in any specific situation going forward, and I imagine the React lifecycle will helpful to understand when it comes to knowing where things need to go so everything happens in the correct order.

React Lifecycle

React allows you to define components as classes or functions, and the methods that you can use on them, which can be called during the lifecycle of a component and allow you to update the UI and application status, are called lifecycle events. The three phases of the component lifecycle are

• mounting - when an instance of a component is being created and inserted into the DOM.
• updating - anytime a component is updated or state changes causing it to rerender.
• unmounting - when a component is being removed from the DOM.

The constructor() for a React component is called before mounting occurs. If it is a subclass, you also need to call super(props). Constructors can use this.state to assign state or can bind event handlers to an instance.

The only method actually required in a class component is render(), which examines this.state and this.props whenever it is called.

componentDidMount() runs after a component is mounted and should be used to load anything using a network request or to initialize the DOM.

If you set shouldComponentUpdate() to false, it won’t automatically rerender after every state change, which helps to optimize performance.

componentDidUpdate() is used to perform network requests after a change has occurred.

componentWillUnmount() allows you to clean up the DOM/network requests.

1. Based on the diagram, the render happens before componentDidMount.
2. The first thing to happen in the lifecycle of React is mounting.
3. Constructor -> Render -> React Updates -> componentDidMount -> componentWillUnmount
4. componentDidMount runs after a component is mounted and is used for network requests and DOM initialization.

React State Vs Props

• Props - arguments to a function, best for initializing components and can rerender components if the props change, cannot change things outside the component from within the component
• state - handled inside the component, manages things within the component and can be updated within the component, rerenders when things change within the component

1. You can pass in arguments through props.
2. The big difference between props and state is that props is managed outside the component while state is managed within it.
3. We rerender our application whenever something is changed.
4. An example of something you could store in state is a counter.

Things I want to know more about

What exactly are network requests/subscriptions in the context this article is using them?

[< table of contents]

[< home]