This week has delved deeper into React and all that goes with it. Through experimentation and classwork, I found a very useful way to pass props. Typically, props are passed down to child elements. But there are ways to pass props and other information back up to parent elements. This was quite useful when trying to make my components more modular. Each modular component could have props and a method passed down to it. Do what it needed to do, and have its own props passed back up the chain for the parent component to work with. Once I figured out the syntax, it worked like a dream.
render() in React is considered a stage in the lifecycle for class components. It is the stage where the appropriate information and components get put into the virtual DOM and then passed into the browsers DOM. To put it another way, it’s where the HTML gets compiled into something the browser can display. All the functions, methods, and JSX runs and returns HTML elements that are passed into the DOM. Then whenever a component updates, it renders that specific part again and passes it into the virtual DOM which then updates that part of the DOM.
setState() is an asynchronous function. When
setState() is called on an existing state it created a pending transition in the call stack. Because of this, the new state isn’t often available inside the same synchronous method or function. Being asynchronous create a better user experience and improves performance since the app isn’t waiting on the state to run. Typically a new state will trigger a re-render so waiting on that can stall out the experience.
There are two type of components. Controlled and Uncontrolled. A controlled component can maintain its own state and can pass it along as a prop. Whereas a uncontrolled component gets its state through the DOM usually in the form of a prop. The controlled version allows for an easier control of various states like those found in forms. But it can become crowded with a large number of inputs to track.