React Js

1. What is React? How is it different from other frameworks?

React Js is modern library for Javascript. Used to make a single page applications. It is
following new ES6 features. So that it’s very fast and developer friendly when compared to
other Javascript libraries.

2. What are components in React?

There are two types of components available in react.

1) Functional Component -> written in Javascript function
2) Class Component -> written in ES6 Class.
Both are independent and reusable block of code. In real time we use these components for
creating static and dynamic user interfaces like as web pages, layouts, etc.

3. What are JSX, Babel, and Webpack?

JSX:
 Known as Javascript XML, we can write Javascript and HTML in single line need to
separate it.
 It’s a shorter syntax for html and Javascript code.
Babel:
 Babel is a Javascript compiler
 Used to convert JSX code into actual Javascript code for the browser understanding.
Webpack:
 Webpack is a module bundler
 It takes whole CSS, Images, and other Javascript files into final bundle, that will be
run in the browser.

4. Explain the difference between Functional and Class components.

Functional Component: Class Component:

Its written in Javascript functions Its written in ES6 class
It supports React Hooks It support Life Cycle methods

 In real time functional components are commonly used due to simplicity, and
performance.
 5. What is the virtual DOM and how does React use it?

 Virtual Dom is light weight memory always having the copy of actual DOM.
 So whenever we change or modify something Virtual DOM is render for that
particular part and update into actual DOM. Not Loaded the entire app for every
render.

6. Unidirectional Data Flow?

 Unidirectional Data Flow is nothing but One Way Data Binding.

 React supports data flow in only single direction ie., Parent -> Child Components.
Not vice versa like Angular.

7. What are props vs state in React?

Props:
 Props are Properties, used to pass the data from parent to child components.
 It’s Immutable
State:
 State is used to store and manage data in components.
 Set initially for creating component and that will be updated after changing /
modifying in the component.
 It’s mutable.

8. What is React Router, and how is routing handled?

 React Router is provided by ‘react-router-dom’

 Used to navigate one page to another by using useNavigate hook method, instead of
with links.

9. What is Prop Drilling, and how do you avoid it?

Prop Drilling occurs when we pass the same prop data from the parent component to
multiple child components, but only few child components will use this data. In this case,
hard to manage. To avoid this, we use useContext hook from Context Api method.
 10. What is the difference between Virtual DOM, and Real DOM in React JS?

Virtual DOM:
 Having the copy of actual DOM.
 It loads only changed or modified part of component.
 So that very fast performance.
 It compares always previous execution of DOM and current execution of DOM. (ie.,
Reconciliation)
 After updates react unmount automatically by using inbuilt life cycle methods. So It
avoids memory wastage.
Real DOM:
 Directly updates into actual DOM
 It loads the entire app for every changes.
 Slow performance.

11. What are controlled and uncontrolled components in React JS?

 Controlled Components update the states via hooks or this. state which means
whenever we change or modify data in form inputs, rendered for each updates.
 Uncontrolled Components updates input data into DOM directly. Here no re-render
is available.

12. Lifting State Up?

 Lifting State Up used to avoid prop drilling and share the same state to the multiple
child components.
 But Its used for local, Parent to Child components. Not for globally declaration.

13. What are Hooks in React JS? and Explain useEffect, useState, useMemo, and
useCallback hooks in detail.

useEffect
 It is similar to componentDidMount () and componentDidUpdate () in life cycle
methods of class component.
 It makes side effect for the components after rendering.
 Mostly used for API calls, Timers, and subscriptions in real time functionalities.
useState
 It is used to update store the initial value and update the state
 Example: Count increment
useMemo
 useMemo is used to memo zing the result value of the function.
 It avoids the re-calculations in a component, so that re-rendering should be avoided
when the state is no changed,
 Example: Searching a product list, if we have no change in searching input terms,
Virtual Dom compares the previous result and current result, so that return the same
result because it memo zed (memorised) the result.
useCallback
 useCallback is also memo zing the function.
 It avoids the re-creation of function.
 It takes the reference of the previous function memory and when we change and
update it uses that reference not recreating.
 And functions passed as a props to the child components. [ States are not updated
in child components directly so that we use call-backs the entire function for
updating]

14. What is the difference between useCallback and useMemo?

Refer the 13.th Question

15. How does React handle form inputs?

Form inputs are handled by controlled components, when we change or entering the values
in form elements, render the component and updates the state vales.

16. How does reconciliation work in React?

Virtual DOM always compares the previous DOM execution and current changes so that
only executes needed part of component. So that reconciliation helps to load the page very
fast.

17. Explain the difference between useEffect and componentDidMount.

Both are used to make the side effects for the component.
useEffect
 It is efficient way of updating state
 It’s enough to handle multiple updating depends on use case. Like
componentDidMount, componentDidUpdate, componentWillUnmount
 Used in functional components
componentDidMount
 It’s less efficient
  Only used in mounting.

18. How do you handle events in React?

We can handle the events in react by using camel case syntax and JSX code.
Example: onClick, onSubmit, etc.,

19. What are keys in React lists, and why are they important?

 Keys are used to identifying the item in a list of array elements in react.
 When we add or removing the item its exactly focusing that particular item.
 Index also do the same logic but when we add or removing something the index
position will be change so that mismatch will be happen.

20. What is the role of defaultProps and propTypes?

defaultProps
 Used to set the default prop value to the parent component when no passed the
props.
propTypes
 Used to declare the datatypes to the props data. So that we can identify and solve
the bugs easily.

21. Explain Lifecycle Methods in React JS.

There are three phases available:

 Mounting (Creating the app)
 Updating (After the updates)
 Unmounting (After Completing the process)
componentWillUnmount ()  Will be render when creating the component for the initial
rendering.
componentDidMount ()  Will be invoked after initial rendering, when props, state set
initial value.
componentDidUpdate ()  Will be invoked and give side effect for updating the states and
props.
componentWillUnmount ()  It clean up the process of mounting (memory).
 22. What is the difference between export default and export in React JS?

export Default  used to export single component to per file.

export  used to export multiple components per file

23. What is a Portal in React JS?

Portal is used to run the child component outside of the parent hierarchy. But still
connected with react components.
Example: HTML file
<div id =” root” ></div>
<div id =” root-product” ></div>

24. NPM/Yarn, package. json?

NPM/Yarn  Node Package Manager  used to install the packages from react library &
Start using yarn start or npm start for staring the application
package. Json  It contains the installed packages inside the script in this file.

25. Basic Testing with tools like Jest or React Testing Library?

 Jest is one of the react testing library, which is used to developer test the
components in efficient way instead of using manual testing.
 There is no proof for manual testing, if the developer tested the component or not,
but it has the proof.
 Used to find out the errors, debugging is easy and get cleaned code.

26. What is Redux? What are Reducer, Action, and Store in Redux?

 Redux is one of the react library for efficient state management

 We centralised the state and managing them with the help of store, we get all from
one source.
 It helps Consistency, Scalability for complex state management
 Debugging is easy
 It has some phases

UI  User interacts with the UI

Dispatch  It dispatch the actions
Action  Find the type of action
 Reducer  Calculate and update the state
Store  Keeps the new state value in the state
UI  Updates the UI from the new state update

27. What is Middleware in Redux?

 Middleware is sit between the action and reducer, and handles the asynchronous
actions.
 In real time, we need to handle login, Api calls, notifications likewise async actions.
 Because Redux is only suitable for synchronous actions.

28. Explain Data Flow in Redux.

 Redux is following the single direction, ie., Unidirectional Data flow (One-way Data
Binding)
React UI
→ dispatch(action)
→ middleware (e.g., thunk/logger)
→ reducer updates state
→ store updates
→ UI re-renders

29. What is Redux-Thunk?

Redux-Thunk is one of the middleware