React Tidbits Quiz

In a world of boilerplate and tutorials, it can be easy to overlook why we do certain practices. Left alone, some of these gaps in our knowledge could make our foundation shaky in the times when it really counts to know your stuff - facing bugs.

Ask yourself about some of these lesser discussed practices - and see if any stump you.

Question 1: Why do we need to import React from 'react' at the beginning of our files?

This line allows us to use JSX when developing with React. JSX transpiles code like Component into React.createElement via Babel.

🤔...transpile? this refers to reading the code of one programming language and producing its equivalent code in another programming language

Question 2: What does Composition refer to?

A model in React in which a more specific component renders a more generic one, configured with props

// generic component
function Room(props) {
  return (
    <div>
      <h1>{props.roomName}</h1>
      <p>{props.furniture}</p>
    </div>
  );
}

// specific component that renders <Room/>
function Dining() {
  return (
    <Room
      roomName="Dining Room"
      furniture="Table" />
  );
}

Question 3: Why is Composition preferred over Inheritance? What about when you want to reuse non-UI functionality between components?

As of now, React argues there are no good use cases for the complexity that arises when creating component inheritance hierarchies. Composition gives you all the flexibility you need to customize a component's look and behavior, especially since components already accept so much (Ex. props/values/React elements/functions).

If you want to reuse non-UI functionality between components, documentation on this suggests extracting it into a separate JavaScript module. This module can be imported by other components to use that function, object, or a class, without extending it.

Question 4: There are two types of class components: Component and PureComponent. Explain the difference between the two.

Several things going on here:

1. PureComponent handles the shouldComponentUpdate method for you
2. When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won’t compare current props and state to the next props and state out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called

🤔...shallow comparison? When comparing previous props and state to next props and state, a shallow comparison will check that

1. The primitives have the same value (Ex. 1 = 1 or that true = true)
2. The references are the same between more complex javascript values like objects and arrays

Question 5: How do you make a function component behave like PureComponent?

Use React.memo - this is a higher order component and by default behaves like PureComponent (shallow compares), yet it takes a second argument where you can pass your own custom props comparison

Question 6: In which phases of a component (mounting, updating, unmounting) does a render occur? What about setState()? The constructor?

This wonderfully architected picture explains all three. Shout out to Toptal.

ES6 Bonus Question 7: What's going on with that arrow syntax - How does a function written without arrow syntax translate to one with arrow syntax?

// Given this function:
function Greeting({ name }) {
return <p>Hello {name}!</p>;
}

// 1 - We store it as an anonymous (no-named) function
// in a new variable called Greeting:
const Greeting = function({ name }) { return <p>Hello {name}!</p>;
}

// 2 - The "function" keyword from our previous
// step is what turns into our arrow:
const Greeting = ({ name }) => {
return <p>Hello {name}!</p>;
}

// Optional step 3: As we only have one line, 
// we can remove the braces. Removing these makes 
// the return implied so we can remove that too:
const Greeting = ({ name }) => <p>Hello {name}!</p>;

Sources

Shoutout to these fantastic articles that have taught me many tidbits.

1. Toptal React Tutorial
2. Codeburst PureComponents