React

Question 1

What is React?

Answer 1

React is an open-source JavaScript frontend library for creating user interfaces. It uses component based approach to create interactive web and mobile user interfaces.

Question 2

What are the advantages of React?

Answer 2

First is the increased performance with Virtual DOM. React is insanely fast.

Second, React uses JSX that makes code painless to read and write.

Third, it uses components, making it easier to pass state and data

Question 3

What is JSX?

Answer 3

JSX is a syntax extension to JavaScript that describes what the UI should look with the full power of JavaScript.

Question 4

What is the difference between Element and Component?

Answer 4

React elements are the building blocks of React applications.
It describes what you want to see on the screen. React elements are immutable.

React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element. Components can also be ES6 classes.

You can say that a component is a factory for creating multiple elements.

Question 5

What are react fragments?

Answer 5

Fragments let you group a list of children without adding extra nodes to the DOM because fragments are not rendered to the DOM.

This is also very useful for CSS Flexbox and Grid as they have special parent to child relationship as adding an extra tag in the between will break the layout.


Question 6

What is prop in React?

Answer 6

Props or properties are arguments passed into React components. It contains data coming down from a parent component to a child component.

Question 7

What is state in React?

Answer 7

State is used to store data that might change during the lifetime of a component. This data can include user input, the results of API calls, or any other data that should be reflected in the user interface.

Component Re-rendering: When the state of a component changes, React automatically re-renders the component to reflect the updated state. This is one of the core principles of React: a component’s UI is a function of its state.

Question 8

Why should we not update the state directly?

Answer 8

Updating the state directly, like below will not cause the component to re-render.

Instead, use setState() method. This method will schedule an update to a component’s state object. When state changes, the component responds by re-rendering.

Question 9

What are Controlled and Uncontrolled Component.

Answer 9

A Controlled Component is one that takes a value through props and notify changes through callbacks like onChange or onClick.

Form data is handled by React component.

Uncontrolled Component is one that stores its own state internally, and queries the DOM using a ref or reference to find the current value when it is needed.

Form data is handled by the DOM.

In most cases, Controlled components are recommended to be used when implement forms.

Question 10

What is Virtual DOM?

Answer 10

A virtual DOM object is a representation of a DOM object, like a lightweight copy.

Once the virtual DOM has been updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.

By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.”

Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM.

Question 11

What is JavaScript?

Answer 11

JavaScript is a programming language that is mainly used on the client side, meaning it runs in the user’s web browser. This enables it to manipulate the Document Object Model (DOM), making web pages interactive and responsive.

Question 12

What is the DOM

Answer 12

The Document Object Model (DOM) represents an HTML or XML document as a tree structure of objects and nodes. This tree structure allows web developers to access and manipulate the content, structure, and style of a web page using programming languages like JavaScript.

Key points about the DOM:

Tree Structure: The DOM organizes the document’s elements (such as HTML tags) into a tree structure. Each element is represented as a node in the tree.

Objects and Nodes: Elements and attributes of a document are represented as objects and nodes in the DOM. These objects and nodes can be accessed and modified programmatically.

API: The DOM provides an API (Application Programming Interface) for interacting with web documents. Web developers can use JavaScript to access and manipulate the DOM to change the content, structure, and appearance of a web page.

Event Handling: The DOM allows for the registration of event handlers that respond to user interactions (e.g., clicks, mouse movements) and can trigger JavaScript functions.

Dynamic Interactivity: With the DOM, web pages can be made interactive, enabling dynamic updates, form validation, and other behaviors.

Question 13

What is HTTP

Answer 13

Hypertext Transfer Protocol.
HTTP follows a request-response model. A client (usually a web browser) sends an HTTP request to a web server, which processes the request and sends back an HTTP response containing the requested data.

Common HTTP methods include GET (retrieve data), POST (submit data), PUT (update data), and DELETE (remove data).

Question 14

What is Async and await

Answer 14

An async function always returns a Promise.

The await keyword is used inside an async function to pause the execution of the function until a Promise is resolved.

Question 15

What is react native

Answer 15

React Native allows developers to create mobile apps for iOS and Android platforms with a single codebase, making it a popular choice for cross-platform mobile app development.

Question 16

What is the difference between relational and non relational databases

Answer 16

Relational - Data is organized into tables with rows and columns. Tables have a predefined schema with fixed columns and data types. SQL databases enforce strict data consistency and relationships between tables using foreign keys.

Non relational - Are schema-less or have a flexible schema. Data can be added without requiring a predefined structure. This flexibility allows for easier adaptation to changing data requirements.

Question 17

What is the difference between Cookies and Session

Answer 17

Storage Location: Cookies store data on the client-side, while sessions store data on the server-side.

Size Limit: Cookies have size limitations, whereas sessions can store larger amounts of data, subject to server resources.

Data Persistence: Cookies can be either session-based or persistent, while sessions are typically session-based.

Accessibility: Cookies are accessible and modifiable on both the client and server sides. Sessions are primarily accessed and managed on the server side.

Security: Sessions are generally more secure than cookies, as the data resides on the server side. Cookies can be vulnerable to client-side attacks.

Question 18

What’s the difference between a for loop and a for each loop

Answer 18

For loops are generally faster than forEach because they don’t have the overhead of calling a function for each element. However, this difference is usually negligible unless you’re working with very large arrays.

Question 19

What is an object

Answer 19

objects are containers for named values called properties

Question 20

What is an array

Answer 20

Arrays consist of an ordered collection or list containing zero or more data types, and use numbered indices starting from 0 to access specific items.

Question 21

What is the difference between undefined and null

Answer 21

Undefined: Represents a variable that has been declared but hasn’t been assigned a value yet.

Null: Represents an intentional absence of any object value.

Question 22

What are react hooks and how do you use them

Answer 22

React hooks are functions that let you “hook into” React state and lifecycle features from function components. Some commonly used react hooks include:

useState - Lets you add state to function components. Returns the current state value and a function to update it.

useEffect - Lets you perform side effects from function components. It runs after render by default.
Performs side effects after render like API calls or subscriptions.
Useful for data fetching, manually changing the DOM, and more.

useContext - Lets you consume React context from function components. Accepts a context object and returns the current context value.

Question 23

What is context in react

Answer 23

React context allows you to pass data through the component tree without having to pass props down manually at every level.

It’s designed to share data that can be considered “global” for a subtree of components, such as the current authenticated user, theme, or preferred language.

Question 24

What is react router

Answer 24

React Router is a popular routing library for React applications. It allows you to define routes in your app and map them to specific components to render. Some key features of React Router include:

Route matching - Define routes with a path and map them to components. When the URL matches the path, the component is rendered.

Route parameters - Access dynamic parameters in the URL through route props. i.e user/:id

Navigation - React Router gives you Link and NavLink components for navigation.

History - Router gives access to the browser history API through history prop.

Question 25

How do you conditionally render content in React?

Answer 25

If statements with JSX inside.
Ternary expressions to render one component or another.
&& logical operator to conditionally show an element.
Controlling component render with state or props.