Hello Worldcomponent in the section "Into the deep end". While this component taught us the basics of React and React components, it was a simplistic example and did not make use of everything React offers.
undefinedis not allowed) or a valid
React.element(in the form of JSX) and receives a
propsobject. But even the
propsobject can be optional and take in
nullas an argument.
React.PureComponent. Don't worry if you do not know what a
PureComponentis for now, we are going to look at them soon. Class components have at least one method named
statein this chapter. State is a very complex topic and is thus getting a chapter of its own. I would advise you to work through this chapter first to understand how components work, and then delve deeper into state in the next chapter.
React.PureComponentand works similarly to a
React.Componentwith the difference that React only renders a Pure component if its props or state have changed compared to the previous render phase. It is often used to optimize performance.
logFunctionoutside of the class in this example.
MyComponentreceives a prop called
loggerwith a reference to the
logFunction. The identity of the reference will stay the same after a re-render. A Pure component would not re-render if its state did not change as the props are identical to that of the previous render.
MyComponent, we create a new function identity with each new render. Therefore, the "shallow comparison" will no longer match between the previous and new props; a re-rendering is triggered.
logConfigobject or array would be replaced with each new render.
React.memo()which also allows us to optimize our re-renders in Function components. We wrap the call around the function in question:
React.memo(), the Function component works similarly to the Class component equivalent which is derived from the
Appcomponent triggers a re-render every 0.2 seconds without new props being passed. The question of all questions is: Which components are being re-rendered and which are not?
import, other components can be used in the same scope.
<MyApp />returns a
<div>which contains the
Hellocomponent which is used to greet both Manuel and Tom. The result:
this.propsas opposed to a plain function argument as was the case with the function component. React takes care of this all in the parsing stage of the
shouldComponentUpdate()lifecycle method. We are going to look at lifecycle methods and state in the following chapter. For now just keep in mind that if a component receives props from the outside it will cause the component as well as its children to re-render.
5as a value I will receive a
10every time. Same input, same output.
10as the argument, I will get back
10 + 1920). If the window size is decreased to 1280 pixels though and the function is called again with the same argument of
10I will receive a different result (
1290). Hence, this is not a pure function.
pureCalculation(10, window.outerWidth)the result will be "pure" as if the same input is passed, the same output is generated each and every time. This will become easier to understand once the function is reduced to its fundamental properties:
propsare accessed — if it is via the
propsargument in a Function component, via the
constructor()in a Class component or at any other point in a Class component via
this.props. The most important thing to remember is this: I do not want to, and also should not under any circumstances, change the value of the props I pass in.
fullNameprops inside of my example component. But of course, this does not work as we have just learned that props are always read-only.
getDerivedStateFromProps()which I want to explain in a bit more detail in another chapter.
propswas modified but not the props themselves.
renderCounterto its initial value of
0. This variable will count how often our
Appcomponent renders, or to be more precise: how often we call
ReactDOM.render()which will cause the
Appcomponent to re-render.
renderApp()function every 2000 milliseconds. But the interval not only executes the function every 2 seconds, it also increments our
renderCountervariable by 1 each time. It is actually quite exciting what's happening here: we are modifying our
renderCounterprop from "the outside".
createElement()calls) can be valid props.