- What is a Component? A Component is a class or function that returns a React Element. Components take in props and return UI just like a function takes in arguments and returns output.
- How do we know whether something should be a component in React? Since React follows a compositional and declarative model for building UI, we want to abstract away imperative code as much as possible into declarative components that can be composed to build our application. This also allows us to reuse our components elsewhere in our application or even in an entirely different application.
- What is the “Virtual DOM”? The Virtual DOM is a representation of the DOM as a tree of React Elements. It describes what the actual DOM should look like in its current state.
- Explain what makes React performant. React is performant because of this Virtual DOM and the Reconciliation or "Diffing" Algorithm that helps the DOM update only what is necessary.
- Explain the "Diffing" Algorithm to someone who does not have any programming experience. What the Diffing Algorithm is doing is comparing the Virtual DOM (or VDOM) against the actual DOM and updating only necessary changes from the VDOM to the DOM. Imagine you had a rather boring internship where your central responsibility was maintaining the master copy of a report. Your boss will periodically hand you updated drafts of this report, and your job is to update, delete, or add content to the master by looking at the difference between the master copy and the new draft your boss handed you. In this contrived example, the master copy of the draft is the actual DOM, the drafts that your boss hands you is the VDOM, and you are performing the Diffing Algorithm to update the master copy of the report.
- What is the difference between Stateless Functional Components and class components? Stateless Functional Components or Pure Components don't maintain state nor do they have any lifecycle methods. Class Components can contain state and several lifecycle methods.
- Describe the reasoning behind Controlled Components. Form state naturally live in the DOM. By decoupling the DOM's form state into our React Component, albeit more typing, it gives us more control of the input field. That is instant input validation, enabling/disabling of buttons, and enforcing input formats.
- What is the correct way to modify state? Make sure to explain what role a child component like “Add User” can have in the app. The correct way to modify state is to call this.setState. Any child component that needs to update its parent state needs to be passed a callback function from its parent.
June 12, 2018
Explain it!
3 min read
