Scribd
Upload
5 views

React Interview Questions

Uploaded by

ramyakrishnamoorthy32
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

React Interview Questions

Uploaded by

ramyakrishnamoorthy32
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

React Interview Questions

● React
○ Javascript library to build user interface
○ Multiple components can be composed together.
○ Create single page application
● Advantages of React
○ Light weight
○ High efficiency
○ Reusable components
● Disadvantages of React
● Babel Js
○ Babel is a javascript compiler that translates javascript code into
older versions of javascript, compatible with old browsers and
environments.
● React components lifecycle
● Mounting Phase
Constructor, static getDerivedStateFromProps,render(), componentdidmount()
● Updating Phase
staticgetDerivedStateFromProps,ShouldComponentUpdate(),render(),getSnapsh
otBeforeUpdate(),ComponentDidUpdate()
● Unmounting Phase
Componentwillunmount

● React components lifecycle in hooks


○ useeffect
● JSX
○ React allows jsx that is a javascript xml combination of html and jsx.
● Transpiler
○ Convert source code from one programming language to another.

● Can browser read jsx directly


○ No, browser can only read javascript object jsx is not regular javascript
object so we transform jsx file to javascript object then pass it to browser.
● State
○ To set data within the component and it can be changed wherever it
needs to be.
● Props
○ To get the value from other component accessed by child
component and it cannot be changed
● Controlled vs Uncontrolled
Controlled Uncontrolled

Controlled by the parent component Controlled by DOM itself

Internal state is not maintained Internal state is maintained

React takes charge manages the input Browser handles it, React stays out of it
value.

React manages and trackes the value in Html form element dom manages and tracks value
state i.e state handled like the value

Mouse clicks The button click event retrieves the input value
directly from the DOM. useref
● State vs Props
State Props

Like variable declared in the function. Props are known as properties used to pass data
Data is passed within the component from one component to another.

Immutable mutable

State only with the class component Props can also in class and function component

Read and write read-only


● Class vs Function
Class Function

Class component with extend and render Simple javascript function accept props as
function return jsx argument and return jsx

Render method to return jsx Render method is not used.

Stateful Component Stateless Component

constructor is used to store state constructor is not used

● What is Redux
○ Redux is a light weight js library to develop the architecture
○ Reduce complexity and carry more data
○ state management
■ Storing all application state in one place “store”, dispatch
● Reducer in redux
○ Current state and action can be combined to create new store.
○ Modifying the state
● Diff b/w flux and redux
○ Flux - design pattern
○ Redux - develop quick design pattern
● Prop drilling
● Tuneeliing
● Pure component
○ When a pure component receives new props or updates its state, it
compares the new values with the previous values using a shallow
equality check. If the values are the same, the component won't re-render,
saving unnecessary rendering and reconciliation work.
○ React applications by reducing unnecessary re-renders.
○ ike pure components by default, thanks to React's reconciliation algorithm
and the use of React hooks like React.memo() or useMemo().
○ Also known as functional component, React.memo
● Higher order components
○ A higher-order component (HOC) is a function that takes a component as
an argument and returns a new component with enhanced functionality. It
allows for the reuse and composition of component logic in React.
■ Reusability
■ Separation of concerns
● Virtual dom
Creates copy of real dom displays the output compares the old and new dom and
update it neededone.
1. Element vs component
2. Purecomponent ref useref

● Diff b/w Find and filter


React Angular

Javascript library Javascript framework


Virtual dom

● Render to redirect to another page


● Router - handle client and server side routing redirect to another page
without refreshing the page
● Key
○ Identify the items How to efficiently update a list
● context api
○ The Context API is particularly useful when you have data or state that
needs to be accessed by multiple components at different levels of the
component tree. It helps simplify data flow and avoids prop drilling.
● Http status code
○ 200 OK: This status code indicates that the request was successful and
the server has returned the requested resource.
○ 201 Created: This status code is typically returned after successfully
creating a new resource on the server.
○ 400 Bad Request: This status code indicates that the server could not
understand the client's request due to malformed syntax or invalid
parameters.
○ 401 Unauthorized: This status code indicates that the requested resource
requires authentication, and the client needs to provide valid credentials.
○ 403 Forbidden: This status code indicates that the client does not have
permission to access the requested resource, even if authentication is
provided.
○ 404 Not Found: This status code indicates that the requested resource
could not be found on the server.
○ 500 Internal Server Error: This status code indicates that an unexpected
error occurred on the server while processing the request.
● Form method
○ Get request data
○ Post send data
○ Put also send data idempotent
○ Delete delete the entire data
● Error check
● function components url epd podrathu
○ Url as a prop useeffect
● reduce func parameters
Componentdidmount,
After the component has been rendered
componentwillmount,
Willmount is called just before the render element called
If we move one page to other page the data don't needs means
Componentwillumnount used

You might also like