React Tidbits Quiz 
Tags: react, javascript, beginners
Published: 2020-07-05 21:54:09

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.

![confused coder](https://dev-to-uploads.s3.amazonaws.com/i/orgul1xrvnt71bztpz6x.jpg)

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

```javascript
// 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](https://reactjs.org/docs/composition-vs-inheritance.html#so-what-about-inheritance) 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](https://www.toptal.com/react/react-tutorial-pt1).

![React Lifecycle Methods](https://dev-to-uploads.s3.amazonaws.com/i/zdp4fd8nuvk8ua4v219f.png)

#### 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?
 
```javascript
// 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](https://www.toptal.com/react/react-tutorial-pt1)
2. [Codeburst PureComponents](https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81)