Toptal Tutorial 2/19 Flashcards
What is React?
A declarative component-based view library that helps one to build a UI.
What would be a React Framework?
By using React, Redux, and React router, we have ll the necessary to make a single page application.
Important Thing #1: React uses JSX, what is JSX?
JSX is a javascript syntax extension that somewhat resembles HTML/XML
Important Thing #2: React is based on the virtual DOM.
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.
Current demand for React experts is?
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…..
Comparing React, Angular and Vue - who is behind their development?
React = Facebook, Angular = Google, Vue = open source.
Components can be either a function or a class. What is the difference?
Class has state and can use refs, lifecycle, and hooks whilst a function component is stateless.
What are the 2 types of class components and what is the difference between them?
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.
Name the 7 react lifecycle methods.
Constructor(props)
componentDidMount()
componentWillUnmount()
componentDidUpdate(prevProps, prevState, snapshot)
shouldComponentUpdate(nextProps, nextState)
getSnapshotBeforeUpdate()
componentDidCatch(error, info)
Name 2 extra methods that are static.
static getDerivedStateFromError(error) statis getSnapshotBeforeUpdate(props, state)
Describe Constructor(props)
- 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.
Describe componentDidMount()
- 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).
Describe componentWillUnmount()
- 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).
Describe componentDidUpdate(prevProps, prevState, snapshot)
- 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.
Describe shouldComponentUpdate(nextProps, nextState)
- 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.
Describe getSnapshotBeforeUpdate()
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.
Describe componentDidCatch(error, info)
- 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.
Describe static getDerivedStateFromError(error)
- 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.
Describe static getSnapshotBeforeUpdate(props, state)
- 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.
What are Props?
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>
Tell more about Props.
- 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.
What is state?
State, on the other hand, is a local state that can be modified, but indirectly by using this.setState
Describe SetState
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
What is the React Context API?
- 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.
