React Concept (Q&A)
- What is react?
React is a JS library used to build user interface..
2. Differentiate between functional and class components. What do you prefer to use and in which situation?
Functional component: A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.
Class component: A class component requires you to extend from React. Component and create a render function which returns a React element.
Functional component: There is no render method used in functional components.
Class component:It must have the render() method returning HTML
Functional component: React lifecycle methods cannot be used in functional components.
Class component:React lifecycle methods can be used inside class components
Functional component: before 16.8 release, functional component was only used for presentation as it couldn’t have state.
Class component:before 16.8 release, only class component can have state and hence it used to be the container component.
Functional component: use React.memo() (higher-order component which only compares prevProps and nextProps (it doesn’t check state)) for performance boost
Class component: use PureComponent and shouldComponentUpdate for performance boost.
3. What is State and Props in react?
Props and State are CORE concepts of React.
Actually, only changes in props and/ or state trigger React to re-render your components and potentially update the DOM in the browser
Props allow you to pass data from a parent (wrapping) component to a child (embedded) component. Whilst props allow you to pass data down the component tree (and hence trigger an UI update),
state is used to change the component, well, state from within. Changes to state also trigger an UI update.
4. What is the difference between State and Props? How do you decide what is controlled by state and what is controlled by pros?
Props vs State
a. Props are read-only. State changes can be asynchronous.
b. Props are immutable. State is mutable.
c. Props allow you to pass data from one component to other components as an argument. State holds information about the components.
d. Props can be accessed by the child component. State cannot be accessed by child components.
e. Props are used to communicate between components. States can be used for rendering dynamic changes with the component.
f. Stateless component can have Props. Stateless components cannot have State.
g. Props make components reusable. State cannot make components reusable.
h. Props are external and controlled by whatever renders the component. The State is internal and controlled by the React Component itself.
5. What is Virtual DOM and how it works?
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
working:
Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
The difference between the previous Virtual DOM representation and the new one will be calculated.
The real DOM will be updated with what has actually changed. This is very much like applying a patch.
6. What is the importance of Key in the map?
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
7. What are the life- cycle methods in react?
Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.
The three phases are: Mounting, Updating, and Unmounting.
8. Which life- cycle method will you use when calling an API?
componentDidMount
9. How do we access the parent component in a child and vice versa. (in react)
We do this using props and state.
Parent to Child via props.
Child to Parent :
Parent will send a function needing arguments to the child as props. this function might change the state in parent’s component.
this function will be invoked by child’s component. not only that, child component will send the argument to the parent’s function as well.
10. Have you used Context?
Yes, context is used as a pipeline to send props from one component(provider) to another.
11. Why use Redux in react?
React Redux implements many performance optimizations internally, so that your own component only re-renders when it actually needs to. you don’t have to worry about lifting your state up or having so many components to manage state.
Redux manage state globally. Only redux changes state and only with reducers(pure functions).
12. Explain how to work with redux?
You can make Redux hold business logic inside its own layer (middleware), alongside with the code for fetching data.
13. What is the container pattern?
In container pattern, container components are more concerned with how things work. Container components are components that specify the data a presentational component should render. Instances of container components can be generated using higher order components such as connect() from Redux. One very important feature of components is their ability to be reused across different parts of an application.
14. What is middleware used for?
Redux middleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.
