Toptal Tutorial 2/19

Question 1

What is React?

Answer 1

A declarative component-based view library that helps one to build a UI.

Question 2

What would be a React Framework?

Answer 2

By using React, Redux, and React router, we have ll the necessary to make a single page application.

Question 3

Important Thing #1: React uses JSX, what is JSX?

Answer 3

JSX is a javascript syntax extension that somewhat resembles HTML/XML

Question 4

Important Thing #2: React is based on the virtual DOM.

Answer 4

The virtual DOM is memory of an ideal tree that is represented by the javascript the developer writes that is later compared with the real DOM and synced with it via a process called reconciliation.

Question 5

Current demand for React experts is?

Answer 5

React has roughly 6-10 times more job openings than Vue and 2-4 times more job openings than Angular. Why then does Vue have more stars than react on GitHub, but way fewer job openings??? No inkling why this is…..

Question 6

Comparing React, Angular and Vue - who is behind their development?

Answer 6

React = Facebook, Angular = Google, Vue = open source.

Question 7

Components can be either a function or a class. What is the difference?

Answer 7

Class has state and can use refs, lifecycle, and hooks whilst a function component is stateless.

Question 8

What are the 2 types of class components and what is the difference between them?

Answer 8

Component and PureComponent. A PureComponent does a shallow comparison of props and state (reduced overhead), and Component will make full comparisons. Component can be used with shouldComponentUpdate.

Question 9

Name the 7 react lifecycle methods.

Answer 9

Constructor(props)
componentDidMount()
componentWillUnmount()
componentDidUpdate(prevProps, prevState, snapshot)
shouldComponentUpdate(nextProps, nextState)
getSnapshotBeforeUpdate()
componentDidCatch(error, info)

Question 10

Name 2 extra methods that are static.

Answer 10

static getDerivedStateFromError(error)
statis getSnapshotBeforeUpdate(props, state)

Question 11

Describe Constructor(props)

Answer 11

• Optional, especially with CRA being that popular, where class field declarations for JavaScript are included as default. It is pointless to declare if you are binding your methods by arrow function within the class body. A similar state can be also initialized as a class property.
• Should be used only for initializing local state for object and binding methods in ES6 classes.

Question 12

Describe componentDidMount()

Answer 12

• Make Ajax calls here.
• If you need event listeners, subscriptions, and such, add them here.
• You can use setState here (but it will make the component rerender).

Question 13

Describe componentWillUnmount()

Answer 13

• Cleans all stuff that is still ongoing—e.g., Ajax should be interrupted, subscription unsubscribed, timers cleared, and so on.
• Do not call setState, as it is pointless because the component will be unmounted (and you will get a warning).

Question 14

Describe componentDidUpdate(prevProps, prevState, snapshot)

Answer 14

• Happens when the component just finished updating (doesn’t happen on initial render).
• Has three parameters that are optional to use (previous props, previous state, and a snapshot that will only appear if your component implements getSnapshotBeforeUpdate).
• Only happens if shouldComponentUpdate returns true.
• If you use setState here, you should guard it or you will land in an infinite loop.

Question 15

Describe shouldComponentUpdate(nextProps, nextState)

Answer 15

• Only for performance optimization.
• If it returns false, then a render will NOT be invoked.
• PureComponent can be used instead if the overridden SCO is just shallow props/state comparison.

Question 16

Describe getSnapshotBeforeUpdate()

Answer 16

Can be used for keeping some information about current DOM, e.g., current scroll position which later can be reused within componentDidUpdate to restore the position of the scroll.

Question 17

Describe componentDidCatch(error, info)

Answer 17

• A place where logging errors should happen.
• Can call setState, but in future releases, it will be dropped in favor of the static method getDerivedStateFromError(error), which will be updating the state by returning a value to update the state.

Question 18

Describe static getDerivedStateFromError(error)

Answer 18

• Error information is available here.
• Should return an object value that will update the state which can be used for handling errors (by displaying something).
• As it is static, it doesn’t have access to the component instance itself.

Question 19

Describe static getSnapshotBeforeUpdate(props, state)

Answer 19

• Should be used in cases where props change over time—as an example, according to React docs, it might be useful for a transition component.
• As it is static, it doesn’t have access to the component instance itself.

Question 20

What are Props?

Answer 20

Props are properties that are passed to the component which later can be reused within it for displaying information/business logic and such:

import React, { Component } from ‘react’;

export default class App extends Component {
   render() {

   return (
       <div>

       </div>
   );    } }

const HelloWorld = (props) => <div>Hello {props.name}</div>

Question 21

Tell more about Props.

Answer 21

• Props are read-only elements and cannot be changed directly in child components
• not only properties like strings can be passed to child components, but also numbers, objects, functions, etc.
• Props have also one more useful thing which is called defaultProps, a static field which can tell you what the default props are for a component (when they are not passed down to the component, for example).
• In case of “lifting state up,” where one component (the parent) has a state which is later being reused by its children (e.g., one child displays it and another allows editing), then we need to pass the function to child from parent, which allows us to update the parent’s local state.

Question 22

What is state?

Answer 22

State, on the other hand, is a local state that can be modified, but indirectly by using this.setState

Question 23

Describe SetState

Answer 23

SetState is a method to change local state object (by doing a shallow merge), and after that, the component responds that by rerendering itself. Be aware that after setState is used, the this.state property won’t reflect the changes mentioned in function right away (it has an asynchronous nature) as a few instances of setState might be batched together due to optimization. It

Question 24

What is the React Context API?

Answer 24

• Was an experimental feature for a long time, but now available in stable version.
• helps us solve one issue: props drilling.
• Before Context (or rather before it became non-experimental), it was drilled down by passing in a recursive way from parent to child through to the last leaf (obviously there was Redux which also could solve the issue). Be aware that this feature solves ONLY props drilling and isn’t a replacement for things like Redux or Mobx. Obviously, if you were using a state management library only for that, then you can replace it freely.

Question 25

Describe the difference between controlled and uncontrolled components in React.

Answer 25

The value of controlled components, as their name suggests, is controlled by React by providing a value to the element that interacts with the user, while uncontrolled elements do not get a value property.

Question 26

What is valuable about the controlled component?

Answer 26

we have a single source of truth which happens to be the React state, so there is no mismatch between what we are seeing on the screen and what we currently have in our state.

Question 27

How do we find the state value in an uncontolled component?

Answer 27

In uncontrolled React components, we do not care about how the value changes, but if we want to know the exact value, we simply access it through ref.

Question 28

What will replace refs in version 16.8?

Answer 28

Hooks

Question 29

What are error boundaries?

Answer 29

• If something goes wrong and there’s no error boundary as its parent, it will result in the whole React app failing.
• With error boundaries, you have an added degree of flexibility that you can use. You can either use one across the whole app and display an error message, or use it in some widgets and simply not display them, or display a small amount of information in place of those widgets instead.
• Remember that it is only about issues with declarative code rather than imperative code that you write for handling some events or calls. For these, you should still use the regular try/catch approach.
• Error boundaries are also a place where you can send information to the Error Logger that you use (in the componentDidCatch lifecycle method).

Question 30

What are Higher Order Components?

Answer 30

HOCs are just functions that take a component as an argument and will return a new component with extended capabilities compared to the one without the HOC wrapper.

Question 31

What are Hooks in React?

Answer 31

They are essentially functions that open up new opportunities, such as:

• Allows the removal of a lot of class components that we only used because we couldn’t have, e.g., a local state or ref, so the code for a component looks easier to read.
• Enables you to use less code for the same effect.
• Makes functions way easier to think about and test, e.g., by using the react-testing-library.
• Can also take parameters, and the result of one can be easily be used by another hook (e.g., setState from useState in useEffect).
• Minifies way better than classes, which tend to be a bit more problematic for minifiers.
• Might remove HOCs and render props patterns in your app which introduced new problems despite having been designed to solve others.
• Capable of being custom-built by any skilled React developer.

Question 32

name 3 basic hooks included as default in the updated React

Answer 32

useState, useEffect, and useContext

Question 33

Name 2 tools to help improve react code performance

Answer 33

Chrome Performance Tab:
https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference

DevTools Profiler:https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

Question 34

Describe current state of react.

Answer 34

React has such a strong standing, backed by a large community following, that it will be difficult to dethrone. The React Community is great, it isn’t running out of ideas, and the core team is constantly working to improve React, adding new features and fixing old issues. React is also backed by a huge company, but the licensing problems are gone—it is MIT licensed right now.
ReactNative has been improved!