Q.What Is React?

React Is A Declarative, Efficient, Flexible Open Source Front-End JavaScript Library Developed By
Facebook In 2011. It Follows The Component-Based Approach For Building Reusable UI Components,
Especially For Single Page Application. It Is Used For Developing Interactive View Layer Of Web And
Mobile Apps. It Was Created By Jordan Walke, A Software Engineer At Facebook. It Was Initially
Deployed On Facebook's News Feed Section In 2011 And Later Used In Its Products Like WhatsApp &
Instagram.

Q.Differentiate Between Real DOM And Virtual DOM.

React Uses Virtual DOM. Below Is The Difference Real And Virtual DOM.

REAL DOM

1. It Updates Slow.

2. Can Directly Update HTML.

3. Creates A New DOM If Element Updates.

4. DOM Manipulation Is Very Expensive.

5. Too Much Of Memory Wastage.

VIRTUAL DOM

1. It Updates Faster.

2. Can’t Directly Update HTML.

3. TUpdates The JSX If Element Updates.

4. DDOM Manipulation Is Very Easy.

5. No Memory Wastage.

Q.What Are The Features Of React?

React Framework Gaining Quick Popularity As The Best Framework Among Web Developers. The
Main Features Of React Are:

1. JSX

2. Components

3. It Follows Uni-Directional Data Flow Or One-Way Data Binding

4. Virtual DOM

5. Simplicity

6. Performance

7. It Uses Server-Side Rendering

Q.What Are The Advantages Of React?

1. Reusable Components
2. Performance Enhancement

3. The Support Of Handy Tools

4. Known To Be SEO Friendly

5. The Benefit Of Having JavaScript Library

6. Easy To Learn And USe

7. Scope For Testing The Codes

8. It Can Be Conveniently Used On The Client As Well As Server Side

9. Using React, Writing UI Test Cases Become Extremely Easy

10. Because Of JSX, Code’s Readability Increases

Q.What Are The Limitations Of React?

- React Is Just A Library, Not A Full-Blown Framework

- Coding Gets Complex As It Uses Inline Templating And JSX

- View Part

- Its Library Is Very Large And Takes Time To Understand

Q.What Is JSX?

JSX Is A Shorthand For JavaScript XML. This Is A Type Of File Used By React Which Utilizes The
Expressiveness Of JavaScript Along With HTML Like Template Syntax. This Makes The HTML File
Really Easy To Understand. This File Makes Applications Robust And Boosts Its Performance.

Q.Why Can’t Browsers Read JSX?

Browsers Can Only Read JavaScript Objects But JSX In Not A Regular JavaScript Object. Thus To
Enable A Browser To Read JSX, First, We Need To Transform JSX File Into A JavaScript Object Using
JSX Transformers Like Babel And Then Pass It To The Browser.

Q.How Is React Different From Angular?

ARCHITECTURE - React Have Only The View Of MVC Where Angular Have Complete MVC

RENDERING - React Have Server-Side Rendering Where Angular Have Client-Side Rendering

DOM - React Uses Virtual DOM Where Angular Uses Real DOM

DATA BINDING - React Have One-Way Data Binding Where Angular Have Two-Way Data Binding

DEBUGGING - React Have Compile Time Debugging Where Angular Have Runtime Debugging

AUTHOR - React By Facebook Where Angular By Google

TYPE - React Is Open Source JS Framework Where Angular Is Open Source MVC Framework

PERFORMANCE - React Is Fast, Due To Virtual DOM Where Angular Is Slow

TESTING - React Support Unit Testing Where Angular Support Unit And Integration Testing
Q.Explain The Purpose Of Render() In React.

Each React Component Must Have A Render() Mandatorily. It Returns A Single React Element Which
Is The Representation Of The Native DOM Component. If More Than One HTML Element Needs To
Be Rendered, Then They Must Be Grouped Together Inside One Enclosing Tag Such As Form, Group,
Div Etc. This Function Must Be Kept Pure I.E., It Must Return The Same Result Each Time It Is
Invoked.

Q.What Is Props?

- Props Is The Shorthand For Properties In React. They Are Read-Only Components Which Must Be
Kept Pure I.E. Immutable. They Are Always Passed Down From The Parent To The Child Components
Throughout The Application. A Child Component Can Never Send A Prop Back To The Parent
Component. This Help In Maintaining The Unidirectional Data Flow And Are Generally Used To
Render The Dynamically Generated Data.

Q.What Is A State In React?

- States Are The Heart Of React Components. States Are The Source Of Data And Must Be Kept As
Simple As Possible. Basically, States Are The Objects Which Determine Components Rendering And
Behavior. They Are Mutable Unlike The Props And Create Dynamic And Interactive Components.
They Are Accessed Via This.State().

Q.Differentiate Between States And Props.

States

- Receive Initial Value From Parent Component

- Parent Component Cant Change Value

- Set Default Values Inside Component

- Changes Inside Component

- Set Initial Value For Child Components

- Cant Changes Inside Child Components

Props

- Receive Initial Value From Parent Component

- Parent Component Can Change Value

- Set Default Values Inside Component

- Cant Changes Inside Component

- Set Initial Value For Child Components

- Hanges Inside Child Components

Q.What Is Arrow Function In React? How Is It Used?

- Arrow Functions Are More Of Brief Syntax For Writing The Function Expression. They Are Also
Called ‘Fat Arrow‘ (=>) The Functions. These Functions Allow To Bind The Context Of The
Components Properly Since In ES6 Auto Binding Is Not Available By Default. Arrow Functions Are
Mostly Useful While Working With The Higher Order Functions.

Q.Differentiate Between Stateful And Stateless Components.

Stateful Component

- Stores Info About Component’s State Change In Memory

- Have Authority To Change State

- Contains The Knowledge Of Past, Current And Possible Future Changes In State

- Stateless Components Notify Them About The Requirement Of The State Change, Then They Send
Down The Props To Them.

Stateless Component

- Calculates The Internal State Of The Components

- Do Not Have The Authority To Change State

- Contains No Knowledge Of Past, Current And Possible Future State Changes

- They Receive The Props From The Stateful Components And Treat Them As Callback Functions.

Q.What Are The Different Phases Of React Component’s Lifecycle?

- There Are Three Different Phases Of React Component’s Lifecycle:

- Initial Rendering Phase: This Is The Phase When The Component Is About To Start Its Life Journey
And Make Its Way To The DOM.

- Updating Phase: Once The Component Gets Added To The DOM, It Can Potentially Update And Re-
Render Only When A Prop Or State Change Occurs. That Happens Only In This Phase.

- Unmounting Phase: This Is The Final Phase Of A Component’s Life Cycle In Which The Component Is
Destroyed And Removed From The DOM.

Q. Explain The Lifecycle Methods Of React Components In Detail.

- ComponentWillMount() – Executed Just Before Rendering Takes Place Both On The Client As Well
As Server-Side.

- ComponentDidMount() – Executed On The Client Side Only After The First Render

- ComponentWillReceiveProps() – Invoked As Soon As The Props Are Received From The Parent Class
And Before Another Render Is Called.

- ShouldComponentUpdate() – Returns True Or False Value Based On Certain Conditions. If You

Want Your Component To Update, Return True Else Return False. By Default, It Returns False.

- ComponentWillUpdate() – Called Just Before Rendering Takes Place In The DOM.

- ComponentDidUpdate() – Called Immediately After Rendering Takes Place.

- ComponentWillUnmount() – Called After The Component Is Unmounted From The DOM. It Is Used
To Clear Up The Memory Spaces.
Q.What Is An Event In React?

In React, Events Are The Triggered Reactions To Specific Actions Like Mouse Hover, Mouse Click, Key
Press, Etc.But There Are Some Syntactical Differences Like:

- Events Are Named Using Camel Case Instead Of Just Using The Lowercase.

- Events Are Passed As Functions Instead Of Strings.

Q.What Do You Understand By Refs In React?

Refs Is The Short Hand For References In React. It Is An Attribute Which Helps To Store A Reference
To A Particular React Element Or Component, Which Will Be Returned By The Components Render
Configuration Function. It Is Used To Return References To A Particular Element Or Component
Returned By Render(). They Come In Handy When We Need DOM Measurements Or To Add
Methods To The Components.

Q.List Some Of The Cases When You Should Use Refs

- When You Need To Manage Focus, Select Text Or Media Playback

- To Trigger Imperative Animations

- Integrate With Third-Party DOM Libraries

Q.What Are Higher-Order Components?

- A Higher-Order Component (HOC) Is A Function That Takes A Component And Returns A New
Component. Basically, It’s A Pattern That Is Derived From React’s Compositional Nature We Call
Them As “Pure’ Components” Because They Can Accept Any Dynamically Provided Child Component
But They Won’t Modify Or Copy Any Behavior From Their Input Components.HOC Can Be Used For
Many Use Cases As Below,

- Code Reuse, Logic And Bootstrap Abstraction

- Render High Jacking

- State Abstraction And Manipulation

- Props Manipulation

Q.What Are React Hooks?

- Hooks Are A New Addition In React 16.8. They Let You Use State And Other React Features Without
Writing A Class. With Hooks, You Can Extract Stateful Logic From A Component So It Can Be Tested
Independently And Reused. Hooks Allow You To Reuse Stateful Logic Without Changing Your
Component Hierarchy. This Makes It Easy To Share Hooks Among Many Components Or With The
Communit

Q.What Are Advantages Of Using React Hooks?

- Primarily, Hooks In General Enable The Extraction And Reuse Of Stateful Logic That Is Common
Across Multiple Components Without The Burden Of Higher Order Components Or Render Props.
Hooks Allow To Easily Manipulate The State Of Our Functional Component Without Needing To
Convert Them Into Class Components. Hooks Don’t Work Inside Classes (Because They Let You Use
React Without Classes). By Using Them, We Can Totally Avoid Using Lifecycle Methods, Such As
ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount. Instead, We Will Use Built-
In Hooks Like UseEffec

Q.What Is UseState() In React?

UseState Is One Of Build-In React Hooks. UseState(0) Returns A Tuple Where The First Parameter
Count Is The Current State Of The Counter And SetCounter Is The Method That Will Allow Us To
Update The Counter's State.

We Can Use The SetCounter Method To Update The State Of Count Anywhere - In This Case We Are
Using It Inside Of The SetCount Function Where We Can Do More Things; The Idea With Hooks Is
That We Are Able To Keep Our Code More Functional And Avoid Class Based Components If Not
Desired/Need

Q.What Is Npm

Npm (Short For Node.Js Package Manager) Is A Package Manager For The JavaScript Programming
Language. It Is The Default Package Manager For The JavaScript Runtime Environment Node.Js. It
Consists Of A Command Line Client, Also Called Npm, And An Online Database Of Public And Paid-
For Private Packages, Called The Npm Registry. The Registry Is Accessed Via The Client, And The
Available Packages Can Be Browsed And Searched Via The Npm Website. The Package Manager And
The Registry Are Managed By Npm, Inc.

Q.What Is Node.JS

Node.Js Is An Open-Source, Cross-Platform JavaScript Run-Time Environment That Executes

JavaScript Code Outside Of A Browser.

Q.What Is StrictMode In React?

React's StrictMode Is Sort Of A Helper Component That Will Help You Write Better React
Components, You Can Wrap A Set Of Components With And It'll Basically:

- Verify That The Components Inside Are Following Some Of The Recommended Practices And Warn
You If Not In The Console.

- Verify The Deprecated Methods Are Not Being Used, And If They're Used Strict Mode Will Warn
You In The Console.

- Lp You Prevent Some Side Effects By Identifying Potential Risks.

Q.What Is Prop Drilling And How Can You Avoid It?

- When Building A React Application, There Is Often The Need For A Deeply Nested Component To
Use Data Provided By Another Component That Is Much Higher In The Hierarchy. The Simplest
Approach Is To Simply Pass A Prop From Each Component To The Next In The Hierarchy From The
Source Component To The Deeply Nested Component. This Is Called Prop Drilling.

- To Avoid Prop Drilling, A Common Approach Is To Use React Context. This Allows A Provider
Component That Supplies Data To Be Defined, And Allows Nested Components To Consume Context
Data Via Either A Consumer Component Or A UseContext Hook.

Q.Difference Table Between Controlled And Uncontrolled Component

Controlled
- It Does Not Maintain Its Internal State.

- Here, Data Is Controlled By The Parent Component.

- It Accepts Its Current Value As A Prop.

- It Allows Validation Control.

- It Has Better Control Over The Form Elements And Data.

Uncontrolled

- It Maintains Its Internal States.

- Here, Data Is Controlled By The DOM Itself.

- It Uses A Ref For Their Current Values.

- It Does Not Allow Validation Control.

- It Has Limited Control Over The Form Elements And Data.

Q.What Is React Context?

- Context Allows Passing Data Through The Component Tree Without Passing Props Down Manually
At Every Level. In React Application, We Passed Data In A Top-Down Approach Via Props. Sometimes
It Is Inconvenient For Certain Types Of Props That Are Required By Many Components In The React
Application. Context Provides A Way To Pass Values Between Components Without Explicitly Passing
A Prop Through Every Level Of The Component Tree.

Q.What Is React Map

- A Map Is A Data Collection Type Where Data Is Stored In The Form Of Pairs. It Contains A Unique
Key. The Value Stored In The Map Must Be Mapped To The Key. We Cannot Store A Duplicate Pair In
The Map(). It Is Because Of The Uniqueness Of Each Stored Key. It Is Mainly Used For Fast Searching
And Looking Up Data.

Q.What Is React Conditional Rendering

- In React, We Can Create Multiple Components Which Encapsulate Behavior That We Need. After
That, We Can Render Them Depending On Some Conditions Or The State Of Our Application. In
Other Words, Based On One Or Several Conditions, A Component Decides Which Elements It Will
Return. In React, Conditional Rendering Works The Same Way As The Conditions Work In JavaScript.
We Use JavaScript Operators To Create Elements Representing The Current State, And Then React
Component Update The UI To Match Them.

- There Is More Than One Way To Do Conditional Rendering In React. They Are Given Below

- If, Ternary Operator, Logical && Operator, Switch Case Operator, Conditional Rendering With
Enums

Q.What Is React Router?

- React Router Plays An Important Role To Display Multiple Views In A Single Page Application. It Is
Used To Define Multiple Routes In The App. When A User Types A Specific URL Into The Browser,
And If This URL Path Matches Any 'Route' Inside The Router File, The User Will Be Redirected To That
Particular Route. So, We Need To Add A Router Library To The React App, Which Allows Creating
Multiple Routes With Each Leading To Us A Unique View.

Q.How Is React Router Different From Conventional Routing?

Conventional Routing

- In Conventional Routing, Each View Contains A New File.

- The HTTP Request Is Sent To A Server To Receive The Corresponding HTML Page.

- In This, The User Navigates Across Different Pages For Each View.

React Routing

- In React Routing, There Is Only A Single HTML Page Involved.

- Only The History Attribute Is Changed.

- In This, The User Is Thinking He Is Navigating Across Different Pages, But Its An Illusion Only.

Q.Why Switch Keyword Used In React Router V4?

- 'Switch' Keyword Is Used To Display Only A Single Route To Rendered Amongst The Several Defined
Routes. The Component Is Used To Render Components Only When The Path Will Be Matched.
Otherwise, It Returns To The Not Found Component.

Q.How Many Ways Can We Style The React Component?

- Inline Styling, CSS Stylesheet, CSS Module, Styled Components

Q.What Is Redux?

- Redux Is An Open-Source JavaScript Library Used To Manage Application State. React Uses Redux
For Building The User Interface. The Redux Application Is Easy To Test And Can Run In Different
Environments Showing Consistent Behavior. It Was First Introduced By Dan Abramov And Andrew
Clark In 2015.

- React Redux Is The Official React Binding For Redux. It Allows React Components To Read Data
From A Redux Store, And Dispatch Actions To The Store To Update Data. Redux Helps Apps To Scale
By Providing A Sensible Way To Manage State Through A Unidirectional Data Flow Model. React
Redux Is Conceptually Simple. It Subscribes To The Redux Store, Checks To See If The Data Which
Your Component Wants Have Changed, And Re-Renders Your Componen

Q.What Are The Three Principles That Redux Follows?

- Single Source Of Truth: The State Of Your Entire Application Is Stored In An Object/State Tree Inside
A Single Store. The Single State Tree Makes It Easier To Keep Changes Over Time. It Also Makes It
Easier To Debug Or Inspect The Application.

- The State Is Read-Only: There Is Only One Way To Change The State Is To Emit An Action, An Object
Describing What Happened. This Principle Ensures That Neither The Views Nor The Network
Callbacks Can Write Directly To The State.

- Changes Are Made With Pure Functions: To Specify How Actions Transform The State Tree, You
Need To Write Reducers (Pure Functions). Pure Functions Take The Previous State And Action As A
Parameter And Return A New State.
Q.List Down The Components Of Redux.

- STORE: A Store Is A Place Where The Entire State Of Your Application Lists. It Is Like A Brain
Responsible For All Moving Parts In Redux.

- ACTION: It Is An Object Which Describes What Happened.

- REDUCER: It Determines How The State Will Change.

Q.Explain The Role Of Reducer.

- Reducers Read The Payloads From The Actions And Then Updates The Store Via The State
Accordingly. It Is A Pure Function Which Returns A New State From The Initial State. It Returns The
Previous State As It Is If No Work Needs To Be Done.

Q.What Is The Significance Of Store In Redux?

- A Store Is An Object Which Holds The Application's State And Provides Methods To Access The
State, Dispatch Actions And Register Listeners Via Subscribe(Listener). The Entire State Tree Of An
Application Is Saved In A Single Store Which Makes The Redux Simple And Predictable. We Can Pass
Middleware To The Store Which Handles The Processing Of Data As Well As Keep A Log Of Various
Actions That Change The Store's State. All The Actions Return A New State Via Reducers.

Q.What Are The Advantages Of Redux?

- Better Code Organization – Redux Is Precise In Terms Of How The Code Needs To Be Organized.
This Results In A Consistent Code Workable For Any Development Team.

- Developer Tools – Allow Developers To Track Each And Everything, Ranging From Actions To State
Changes, Happening In The Application In Real-Time

- Large-Scale Community – Redux Is Backed By A Mammoth Community. It Contributes To An Ever-

Growing And Refined Library And Ready-To-Use Applications

- Easy Testing – Redux Code Is Mainly Composed Of Functions That Are Isolated, Pure, And Small.
Hence, Testing Is Much Easy And Simple

- Maintainability – Thanks To A Predictable Outcome And Strict Structure, The Code Is Easier To
Maintain.

- Output Predictability – There Is No Confusion About Syncing The Current State With Actions As
Well As Other Parts Of The Application As There Is Only A Single Source Of Truth, Which Is The Store

- Server-Side Rendering – There Is A Need Of Only Passing The Store Created On The Server-Side To
The Client-Side. In Addition To This Being Useful For Initial Render, It Also Offers A Better User
Experience Because It Optimizes The Application Performance

Q.What Is Redux DevTools?

- Redux DevTools Is A Live-Editing Time Travel Environment For Redux With Hot Reloading, Action
Replay, And Customizable UI. If You Don’t Want To Bother With Installing Redux DevTools And
Integrating It Into Your Project, Consider Using Redux DevTools Extension For Chrome And Firefo

Q.What Is The Difference Between React Context And React Redux?

- You Can Use Context In Your Application Directly And Is Going To Be Great For Passing Down Data
To Deeply Nested Components Which What It Was Designed For. Whereas Redux Is Much More
Powerful And Provides A Large Number Of Features That The Context Api Doesn't Provide.

- Also, React Redux Uses Context Internally But It Doesn’t Expose This Fact In The Public API. So You
Should Feel Much Safer Using Context Via React Redux Than Directly Because If It Changes, The
Burden Of Updating The Code Will Be On React Redux Instead Developer Responsibility.

Q.What Are The Features Of Redux DevTools?

- Lets You Inspect Every State And Action Payload

- Lets You Go Back In Time By “Cancelling” Actions

- If You Change The Reducer Code, Each “Staged” Action Will Be Re-Evaluated

- If The Reducers Throw, You Will See During Which Action This Happened, And What The Error Was
With PersistState() Store Enhancer, You Can Persist Debug Sessions Across Page Reloads

Q.Are There Any Similarities Between Redux And RxJS?

- These Libraries Are Very Different For Very Different Purposes, But There Are Some Vague
Similarities.

- Redux Is A Tool For Managing State Throughout The Application. It Is Usually Used As An
Architecture For UIs. Think Of It As An Alternative To (Half Of) Angular.

- RxJS Is A Reactive Programming Library. It Is Usually Used As A Tool To Accomplish Asynchronous

Tasks In JavaScript. Think Of It As An Alternative To Promises.

Redux Uses The Reactive Paradigm Little Bit Because The Store Is Reactive. The Store Observes
Actions From A Distance, And Changes Itself. RxJS Also Uses The Reactive Paradigm, But Instead Of
Being An Architecture, It Gives You Basic Building Blocks, Observables, To Accomplish This
"Observing From A Distance" Pattern.

Q.What Is Code-Splitting In React

- Code-Splitting Is A Feature Supported By Bundlers Like Webpack, Rollup And Browserify (Via
Factor-Bundle) Which Can Create Multiple Bundles That Can Be Dynamically Loaded At Runtime.

Q.What Bundling In React

- Most React Apps Will Have Their Files “Bundled” Using Tools Like Webpack, Rollup Or Browserify.
Bundling Is The Process Of Following Imported Files And Merging Them Into A Single File: A
“Bundle”. This Bundle Can Then Be Included On A Webpage To Load An Entire App At Once

Q.What Is React.Lazy

- React.Lazy Is The Recommended Solution For Code Splitting. It Uses Suspense And It Is Maintained
By React.

Q.What Are The Differences Between React.Lazy And @Loadable/Components?

React.Lazy-

- Support Suspense
- Not Supporting SSR

- Not Supporting Library Splitting

- Not Supporting Import(`./${Value}`)

@Loadable/Component-

- Support Suspense

- Supporting SSR

- Supporting Library Splitting

- Supporting Import(`./${Value}`)

Q.What Is Suspense In React Code Splitting

- React Suspense Is A Generic Way For Components To Suspend Rendering While They Load Data
From A Cache. It Is A Fundamentally New Capability That: Lets You Render A Component Tree “In
Background” While Components Are Fetching Data, And. Display Them Only After The Whole Tree Is
Ready

Q.What Is A Pure Function?

- Such Functions Are Called “Pure” Because They Do Not Attempt To Change Their Inputs, And
Always Return The Same Result For The Same Inputs. React Is Pretty Flexible But It Has A Single Strict
Rule: All React Components Must Act Like Pure Functions With Respect To Their Props.

Q.What Are The Components In React?

- Components Are The Building Blocks Of Any React Application, And A Single App Usually Consists
Of Multiple Components. A Component Is Essentially A Piece Of The User Interface. It Splits The User
Interface Into Independent, Reusable Parts That Can Be Processed Separate

- There Are Two Types Of Components In React:

- Statelfull Components

- Stateless Components

Q.What Are Functional Components?

- These Types Of Components Have No State Of Their Own And Only Contain Render Methods, And
Therefore Are Also Called Stateless Components. They May Derive Data From Other Components As
Props (Properties).

Q.What Are Class Components?

- These Types Of Components Can Hold And Manage Their Own State And Have A Separate Render
Method To Return JSX On The Screen. They Are Also Called Stateful Components As They Can Have A
State.

Q.What Is The Flux?

- Flux Is The Application Architecture That Facebook Uses For Building Web Applications. It Is A
Method Of Handling Complex Data Inside A Client-Side Application And Manages How Data Flows In
A React Application.
- There Is A Single Source Of Data (The Store) And Triggering Certain Actions Is The Only Way Way To
Update Them.The Actions Call The Dispatcher, And Then The Store Is Triggered And Updated With
Their Own Data Accordingly

- When A Dispatch Has Been Triggered, And The Store Updates, It Will Emit A Change Event That The
Views Can Rerender Accordingly.

Q.How Is Redux Different From Flux?

Redux-

- Redux Is An Open-Source JavaScript Library Used To Manage Application State

- Store’s State Is Immutable

- Can Only Have A Single-Store

- Uses The Concept Of Reducer

Flux

- Flux Is An Architecture And Not A Framework Or Library

- Store’s State Is Mutable

- Can Have Multiple Stores

- Uses The Concept Of The Dispatcher

Q.What Is Major Differences Between The ES5 And ES6

- Require Vs. Import – The Require Used In ES5 Is Now Replaced With Import. Var React =
Require('React'); //Is Now Replaced With Import React From 'React'; //In ES6

- Export Vs. Exports – Instead Of Exports, Now Export Is Used.Export Default Component; // Replaces
Module.Exports = Component; // In ES6

- Component And Function – The Use Of Component And Function Has Also Changed From ES5 To
ES6.

Q. You Must’ve Heard That “In React, Everything Is A Component.” What Do You Understand From
The Statement?

- The Building Blocks Of A React Application’s UI Are Called Components. Any App UI Created Using
React Is Divisible Into A Number Of Small Independent And Reusable Pieces, Known As Components.
React Renders Each Of The Components Independent Of Each Other. Hence, There Is No Effect Of
Rendering A Component On The Rest Of The App UI.

Q.Can Parent Component Change Value In States And Props?

- The Parent Component Can Change The Value In Props But Not In The State.

Q.Can Changes Be Made Inside The Component?

- The Changes Can Be Made Inside The State But Not In Props.

Q.Can We Make Changes Inside Child Components?

- Yes, We Can Make Changes Inside The Child Component In Props But Not In The Case Of States.

Q.Define Synthetic Events In React?

- The Synthetic Events In React Are The Objects In React, Which Acts As A Cross-Browser Wrapper
Around The Browser's Native Event. The Main Purpose Is To Combine The Different Browsers On The
API So That The Event Shows Various Properties.

Q.Can We Modularize Code In React? How?

- Yes, We Can Modularize Code In React. It Can Be Done By Using Export And Import Properties.

Q.What Is The Difference Between React Context And React Redux?

- We Can Use Context In Our Application Directly And Is Going To Be Great For Passing Down Data To
Acutely Nested Components That What It Was Designed For. Whereas Redux Is Much More Potent
And Provides A Large Number Of Skin Textures That The Context API Doesn’t Provide. Also, React
Redux Uses Context Internally But It Doesn’t Render This Fact In The Public API.

Q.What Is The Difference Between React Native And React?

- React -JavaScript Library, Supporting Both Front-End Web And Being Run On The Server, For
Building User Interfaces And Web Applications. React Native – Mobile Framework That Compiles To
Native App Components, Allowing You To Build Native Mobile Applications (IOS, Android, And
Windows) In JavaScript That Allows You To Use React To Build Your Components, And Implements
React Under The Hood.

Q.What Is The Difference Between Element And Component?

- Element – A Plain Object Describing What We Want To Appear On The Screen In Terms Of The
DOM Nodes / Other Components. Elements Can Contain Other Elements In Their Props. Creating A
React Element Is Cheap. Once An Element Is Created, It Is Never Mutated.

- Component – Declared In Several Ways. Component Can Class With A Render() Method.
Alternatively It Can Be Defined As A Function. Component Takes Props As An Input, And Returns An
JSX Tree As The

Q.What Is The Super Keyword In React?

- The Super Keyword Is Used To Access & Call Functions On An Object’s Parent.

Q.What Is Meant By Callback Function? What Is Its Purpose?

- A Callback Function Should Be Called When SetState Has Finished, And The Component Is Re-
Rendered. As The SetState Is Asynchronous, Which Is Why It Takes In A Second Callback Function.

Q.Explain The Use Of ‘Key’ In React List

- Keys Allow You To Provide Each List Element With A Stable Identity. The Keys Should Be Unique.

Q.Explain Error Boundaries?

- Error Boundaries Help You To Catch Javascript Error Anywhere In The Child Components. They Are
Most Used To Log The Error And Show A Fallback UI.

Q.What Is The Use Of Empty Tags <> ?

- Empty Tags Are Used In React For Declaring Fragments.

Q.What Is The Use Of Webpack?

- Webpack In Basically Is A Module Builder. It Is Mainly Runs During The Development Proc

Q.What Is Babel In React Js?

- Babel, Is A JavaScript Compiler That Converts Latest JavaScript Like ES6, ES7 Into Plain Old ES5
JavaScript That Most Browsers Understand.

Q.Explain The Term Reconciliation

- When A Component’s State Or Props Change Then Rest Will Compare The Rendered Element With
Previously Rendered DOM And Will Update The Actual DOM If It Is Needed. This Process Is Known As
Reconciliation.

Q.Explain The Meaning Of Mounting And Demounting

- The Process Of Attaching The Element To The DCOM Is Called Mounting.

- The Process Of Detaching The Element From The DCOM Is Called The Demounting Process

Q.Name Any Five Predefined Prototypes Used In React

- Most Important Protoype Used In React Js Are: Number, String, Array, Object, Element

Q.What Is BrowserRouter In React?

- BrowserRouter Is The Router Implementation For HTML5 Browsers (Vs Native): - Link Is Your
Replacement For Anchor Tags.

- Route Is The Conditionally Shown Component Based On Matching A Path To A URL.

- Switch Returns Only The First Matching Route Rather Than All Matching Routes.

Q.What Is The Use Of Switch In React Router?

- The Component Will Only Render The First Route That Matches/Includes The Path. Once It Finds
The First Route That Matches The Path, It Will Not Look For Any Other Matches. Not Only That, It
Allows For Nested Routes To Work Properly, Which Is Something That Will Not Be Able To Handle

Q.What Is History In React Router?

- The Term “History” And " History Object" In This Documentation Refers To The History Package,
Which Is One Of Only 2 Major Dependencies Of React Router (Besides React Itself), And Which
Provides Several Different Implementations For Managing Session History In JavaScript In Various
Environments

Q.Is SetState() Is Async? Why Is SetState() In React Async Instead Of Sync?

- SetState() Does Not Immediately Mutate This.State But Creates A Pending State Transition.
Accessing This.State After Calling This Method Can Potentially Return The Existing Value. There Is No
Guarantee Of Synchronous Operation Of Calls To SetState And Calls May Be Batched For
Performance Gains.
- This Is Because SetState Alters The State And Causes Rerendering. This Can Be An Expensive
Operation And Making It Synchronous Might Leave The Browser Unresponsive. Thus The SetState
Calls Are Asynchronous As Well As Batched For Better UI Experience And Performance

Q.What Is Layout With Flexbox?

- A Component Can Specify The Layout Of Its Children Using The Flexbox Algorithm. Flexbox Is
Designed To Provide A Consistent Layout On Different Screen Sizes.

Q.What Is UseEffect Hook?

- The Effect Hook, UseEffect, Adds The Ability To Perform Side Effects From A Function Component.
It Serves The Same Purpose As ComponentDidMount, ComponentDidUpdate, And
ComponentWillUnmount In React Classes, But Unified Into A Single API.