learn kro favicon img

React and Redux Interview Question Answers

  • 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 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.

You Might Like:

Let’s say we have a complex object, and we’d like to convert it into a string, to send it over ...
Read More
Let’s meet a new built-in object: Date. It stores the date, time and provides methods for date/time management. For instance, ...
Read More
The two most used data structures in JavaScript are Object and Array.
  • Objects allow us to create a single ...
    Read More
Let’s step away from the individual data structures and talk about the iterations over them. In the previous chapter we ...
Read More
As we know from the chapter Garbage collection, JavaScript engine keeps a value in memory while it is “reachable” and can ...
Read More
Till now, we’ve learned about the following complex data structures:
  • Objects are used for storing keyed collections.
  • Arrays are ...
    Read More
Iterable objects are a generalization of arrays. That’s a concept that allows us to make any object useable in a ...
Read More
1. The following recursive code will cause a stack overflow if the array list is too large. How can you ...
Read More
1. difference between Function.prototype.apply and Function.prototype.call? The only difference between apply and call is how we pass the arguments in ...
Read More
Solve 10 Days of JavaScript HackerRank Problems Today we’ve solved several JavaScript coding interview problems from hackerrank.com. Here we’ve presented ...
Read More

Leave a Comment

Your email address will not be published. Required fields are marked *