React Questions

React is a declarative, efficient, and flexible JavaScript library for building user interfaces or UI components.

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another.

Refs are a function provided by React to access the DOM element and the React element that you might have created on your own. 

A component is mounted when it is added to the DOM.

Props are immutable. State is mutable.

No, you cannot update props in react. You can only update state.

JSX is an HTML like syntax used by React and React Native that allows you to write HTML inside of JavaScript.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions

React Router is a routing library for React. It allows you to render different components based on the URL.

You can style your components using CSS, but you can also use the JSX syntax to style your components.

Children prop is a prop that is used to pass children to a component.

createElement is used to create a new element and cloneElement is used to clone an existing element.

ReactJS has a lifecycle of three stages:

• Mounting
• Updating
• Unmounting

Mounting is the process of creating a native view and mounting it to the screen. 

Updating is the process of updating the native view. 

Unmounting is the process of removing the native view from the screen.

With React Hooks we can use useEffect and useState to manipulate and trigger these stages

Prop drilling is the term for passing data through several nested children components. It can cause issues with component reusability and app performance.

Context is a way to share data between components without having to pass props down the component tree.

Redux is a state management pattern. It helps you manage the application state, synchronizing the application's state between multiple parts of the application.

It has three main parts:

• Reducers: A function that returns the next state given the current state and an action to handle.
• Actions: An object that describes an event. It has a type property that defines the event, and a payload property that contains the data associated with the event.
• Store: A single source of truth for the application state. It is the only source of truth for the application state.

A stateless component is a component that does not maintain any state. It is a function that returns a React element.

A callback function is a function that is passed to another function as an argument. The callback function is then called inside the function that it is passed to.

The key property is used to uniquely identify each element in a list. It is used to optimize the rendering of the list.

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, 

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

• ReactJS main focus is Web Development
• ReactJS is a Javascript library
• React uses HTML tags like p,span,div, etc...
• React Native is focused on Mobile Development
• React Native is a mobile framework that uses Javascript Engine
• Both are open-source and supports the JSX syntax

A higher-order component is a function that takes a component and returns a new component.

Hooks allow you to write functions that can be used in React components. They are a way to write code in a modular and reusable way, using all the React features.

A functional component is a function that returns a React element. A class component is a class that extends React.Component.

An event is an action that can be triggered by a User or any System like pressing a key, or a mouse click.

Forward refs are a way to reference a component that is not yet defined. You can use forward refs to reference components that are defined later in your code.

Reconciliation is the process of comparing the current state of the component with the previous state and updating the component to reflect the new state.

A synthetic event is a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault() , except the events work identically across all browsers.

Flux is an architecture for creating data layers in JavaScript applications. It was designed on Facebook along with the React view library.

It places a focus on creating explicit and understandable update paths for your application's data, which makes tracing changes during development simpler and makes bugs easier to track down and fix.

React portals are a way to render a child component inside a DOM node that is outside the React tree. This is useful for rendering a dialog or a tooltip inside a table or a tree.

Virtual DOM is a copy of the whole DOM object.

On the other hand, Shadow DOM creates small pieces of the DOM object which has isolated scope for the element they represent.

useState creates queues for React core to update the state object of a React component. So the process to update React state is asynchronous for performance reasons.

useMemo is a React hook that allows you to memoize the return of expensive functions, avoiding calling them on every render.

React re-renders all components and sub components every time setState is called.