Differentiate between the Real DOM and the Virtual DOM
Real DOM:
- Creates a new DOM if an element updates
Virtual DOM:
- The virtual DOM is like a blueprint. It contains all the details needed to construct the DOM, and can be changed easily. Fast because React figures out the difference between the virtual DOM and the real DOM to get the two trees to match
What is React?
- React is a front-end JavaScript library
- Follows component-based approach to build reusable UI components
Advantages of React
- Uses virtual DOM to increase application performance
- More readable due to JSX
Limitations of React
- The library is very large, not only in dependencies but in complexity, takes a long time to master
What is JSX?
JSX is a JavaScript syntax extension that allows you to write HTML tags directly in your JavaScript code
What is JSX?
JSX is a JavaScript syntax extension that allows you to write HTML tags directly in your JavaScript code
Explain how the Virtual DOM works
Whenever there is a change, React compares the virtual DOM to the Real DOM in order to calculate what changes need to be made to the Real DOM, and will update only the things that need to be changed.
What are props?
Props are passed down from parent to child components throughout the React app, such as variables/data. (Generally used to render dynamic data).
Explain the lifecycle methods of React components
componentDidMount: Executed on client side after first render
componentDidUpdate: Called right after rendering takes place
componentWillUnmount: Called after component is unmounted from the DOM
How do lifecycle methods work in React functional components?
The useEffect hook works similarly to the three lifecycle methods: componentDidMount (initial render), componentDidUpdate (dependency array), and componentWillUnmount (cleanup function).
Controlled components vs uncontrolled components
Controlled components:
- Do not maintain their own state
- Data is controlled by the parent component
- Take in current values through props and then notify the changes via callbacks
Uncontrolled components:
- Maintain their own state
- Data is controlled by the DOM
What is a higher order component?
Higher-order-component (HOC) is a function that takes a component and returns a new component.
What can you do with higher order components?
Reuse code, and abstract state away
What is the significance of keys in React?
The main purpose of keys is to help React differentiate and distinguish elements from each other. It helps React identify what elements have changed/added/removed.
What is Redux?
Redux is a predictable state container for JavaScript applications and is used for managing the application’s state
What are the 3 principles that Redux follows?
- Single source of truth: State of the entire app is stored in an object.
- State is read-only: The only way to change the state is to trigger an action. An action is a POJO describing the change
- Changes are made with pure functions: Pure functions are those whose return value depends solely on the values of their arguments.
What are the 3 principles that Redux follows?
- Single source of truth: State of the entire app is stored in an object.
- State is read-only: The only way to change the state is to trigger an action. An action is a POJO describing the change
- Changes are made with pure functions: Pure functions are those whose return value depends solely on the values of their arguments.
What does single source of truth mean?
In React-Redux applications, when your Redux is a single source of truth, it means that the only way to change your data in UI is to dispatch redux action which will change state within redux reducer. And your React components will watch this reducer and if that reducer changes, then UI will change itself too. But never other way around, because Redux state is single source of truth.
What does single source of truth mean?
In React-Redux applications, when your Redux is a single source of truth, it means that the only way to change your data in UI is to dispatch redux action which will change state within redux reducer. And your React components will watch this reducer and if that reducer changes, then UI will change itself too. But never other way around, because Redux state is single source of truth.
How does data flow through Redux?
- Follows a unidirectional flow of data.
- An action is dispatched when a user interacts with the app.
- The root reducer is called with the current state and the dispatched action.
- The subscribed components rerender when the store changes
What is an action in Redux?
Actions in Redux are an object that have a type property that indicates what type of action is being performed.
What is a reducer in Redux?
Reducers are pure functions that specify how the application’s state changes in response to an action. It returns a NEW state.
Advantages of Redux?
- Very predictable, as there is one source of truth
- Maintainable, as it is predictable
