react-advance

What are the differences between functional and class components?
A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. A class component requires you to extend from React. Component and create a render function which returns a React element. There is no render method used in functional components

. What are the different lifecycle methods in React?
As everything goes through a cycle of taking birth, growing, and death the same goes with React. Each component in React has a lifecycle that goes through three main phases Mounting, Updating, and Unmounting. The react lifecycle method is used in the React class component.

Explain Strict Mode in React.
StrictMode is a tool for highlighting potential problems in an application. Like Fragment StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

Explain React state and props.
Props are used to pass data, whereas state is for managing data. Data from props is read-only, and cannot be modified by a component that is receiving it from outside. State data can be modified by its own component, but is private (cannot be accessed from outside

Name a few techniques to optimize React app performance.
performance Optimization Techniques for React Apps Using Immutable Data Structures. ... Function/Stateless Components and React. ... Multiple Chunk Files. ... Use React. ... Avoid Inline Function Definition in the Render Function. ... Throttling and Debouncing Event Action in JavaScript. ... Avoid using Index as Key for map.

What are keys in React?
A “key” is a special string attribute you need to include when creating lists of elements in React. Keys are used to React to identify which items in the list are changed, updated, or deleted. In other words, we can say that keys are used to give an identity to the elements in the lists.

How to pass data between react components?
1. Method 1: Integrate the methods mentioned above . 2. Method 2: Use Redux by maintaining the states of all child components that you might need in a global store and obtain the data from said store. 3. Method 3: Utilize React's Context API. 4. Step 1: Generate a provider component for the two child components.

What is the main difference between Angular and React?
Angular allows two-way data binding while React allows one-way data binding. Two-way data binding means that any changes you make to the model affect the view, and vice versa. One-way data binding means any changes you make to the model affect the view, but not the other way around

What is React Router?
React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

Explain the use of CSS modules in React.
CSS Modules tries to solve a problem that you might encounter when working on medium to large projects and that is global scoping in CSS. By default CSS scoping is global and the reason for this is that we want of styles to cascade throughout our project.

What can you do with HOC?
The purpose of a HOC is to enhance a component (usually a dumb component) with extra functionality. A HOC allows for reusability since in real-life applications there is a need to re-use the same functionalities in various similar kinds of components. A very common functionality is toggling
Higher order components use its make news components and as pass new agruments

what is memo funtion in react.js
The useMemo is a hook used in the functional component of react that returns a memoized value. In Computer Science, memoization is a concept used in general when we don't need to recompute the function with a given argument for the next time as it returns the cached result.

what is lazy funtion in react.js
We can control internal function its render or reload again we prevent and control this via memo function
lazy() It is a new function in react that lets you load react components lazily through code splitting without help from any additional libraries. Lazy loading is the technique of rendering only-needed or critical user interface items first, then quietly unrolling the non-critical items later.
suspense fallback="Home" suspense

HMTL 5 interview

What Is doctype in html 5
All HTML documents must start with a declaration.The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect. In HTML 5, the declaration is simple

What is difference between SVG and Canvas
The HTML svg element is a container for SVG graphics. SVG stands for Scalable Vector Graphics. SVG and useful for defining graphics such as boxes, circles, text, etc. SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. The HTML canvas element is used to draw graphics, via JavaScript. The canvas element is a container for graphics.

What is WebSocket
A WebSocket is a persistent connection between a client and server. WebSockets provide a bidirectional, full-duplex communications channel that operates over HTTP through a single TCP/IP socket connection. At its core, the WebSocket protocol facilitates message passing between a client and server.

What is geo location
HTML5 Geolocation. The Geolocation is one of the best HTML5 API which is used to identify the user's geographic location for the web application. This new feature of HTML5 allows you to navigate the latitude and longitude coordinates of the current website's visitor
What is Canvas

Tell me about What is Multimedia?tag
Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats. Note: MP4, WebM, and Ogg video are supported by the HTML standard. Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.

can you tell about nested pages
iframe src="https://www.javatpoint.com/" height="50%" width="70%" iframe >

what is semitic element in html5
Many web sites contain HTML code like: to indicate navigation, header, and footer. In HTML there are some semantic elements that can be used to define different parts of a web page: footer, header, aside, article

what is HTML figure and figcaption Elements
The figure tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. The figcaption tag defines a caption for a figure element. The figcaption element can be placed as the first or as the last child of a figure element.

What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):
meta name="viewport" content="width=device-width, initial-scale=1" Use a media query to add a breakpoint at 800px: media screen and (max-width: 800px) { }

What is the difference between “display: none” and “visibility: hidden”, when used as attributes to the HTML element.?
When we use the attribute “visibility: hidden” for an HTML element then that element will be hidden from the webpage but still takes up space. Whereas, if we use the “display: none” attribute for an HTML element then the element will be hidden, and also it won’t take up any space on the webpage.

What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?
A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language. It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and inheritance to name a few, supercharging your vanilla CSS. SASS: Sass is the acronym for “Syntactically Awesome Style Sheets”. SASS can be written in two different syntaxes using SASS or SCSS SASS vs SCSS • SASS is based on indentation and SCSS(Sassy CSS) is not. • SASS uses .sass extension while SCSS uses .scss extension. • SASS doesn’t use curly brackets or semicolons. SCSS uses it, just like the CSS.

What is the Box model in CSS?
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. width: 320px; padding: 10px; border: 5px solid gray; margin: 0;

320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px

Difference between CSS grid vs flexbox?
CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows. Grid layout is intended for larger-scale layouts which aren’t linear in design. Flexbox is largely a one-dimensional system (either in a column or a row). Flexbox layout is most appropriate to the components of an application.

What is borderbox Defines how the width and height of an element are calculated: should they include padding and borders, or not There are four different combinators in CSS: • descendant selector (space) • child selector (>) : select only child selector div > p • adjacent sibling selector (+): select only div +p = div outer first p • general sibling selector (~):-select only div ~p:- div outer last p