React-Js principles every junior developer must know
How does react works behind the scenes?
To efficiently update the user interface, React uses a virtual DOM (Document Object Model). When a component's state changes, React generates a virtual DOM tree, compares it to the previous one, and calculates the most effective way to update the actual DOM. Some of the steps involved in this process are:
- React builds a lightweight duplicate of the actual DOM in memory, which is known as the virtual DOM.
- Reconciliation is the process by which React compares the previous virtual DOM to the current one in order to find differences or changes.
- React uses a reconciliation process to determine the smallest amount of changes required to update the actual DOM.
- React updates only the necessary components of the actual DOM after calculating the minimal modifications.
Phases of react component lifecycle
A react component undergoes the following lifecycle:
- Mounting: Inserting the component into the DOM.
- Updating: Handling changes to props or state.
- Unmounting: Removing the component from the DOM.
Client side vs Server side rendering
Client-side Rendering (CSR): The browser loads a JavaScript file that renders the content on the client side once the original HTML is delivered.
Server-side Rendering (SSR): The server provides fully-rendered HTML to the client, decreasing the client's initial rendering workload.
Event Propagation vs Bubbling
The order in which events are processed by the elements in a document is referred to as event propagation. Event propagation is divided into two stages: capturing and bubbling.
Phase of Capture:
The event is caught from the most distant ancestor down to the target element during the capturing phase. During this phase, you can intercept an event before it reaches the target element.
Phase of Bubbling:
The event then enters the bubbling phase, during which it propagates from the target element back up to the outermost ancestor. This phase is useful for dealing with the event as it propagates across the DOM structure.
So, to summarise:
Event Capturing: This occurs from the target element's most distant ancestor. Event Bubbling: Occurs from the target element all the way up to the most distant ancestor. Depending on their needs, developers can handle events during the capturing or bubbling phases, or both. Delegation is possible with event propagation because a common ancestor can handle events on behalf of its descendants.
If you click on a button inside a div, for example, the capturing phase will go from the outermost ancestor (e.g., the document) to the button, and the bubbling phase will go from the button back up to the outermost ancestor. Event listeners can be configured to activate during either of these phases.
Children Props
In React, the children prop is a special prop that allows a component to pass children components (or text) to its output. It is commonly used to create reusable components.
Difference between Class & Functional component
Class components in React are ES6 classes that extend from React.Component. They enable direct DOM interaction by allowing the usage of local state, lifecycle methods such as componentDidMount, and refs. They do, however, require the use of "this" to access props and state.
Functional components, introduced in React 16.8 with the introduction of hooks, are simpler JavaScript functions. They lacked state and lifecycle methods prior to hooks, but with hooks like useState and useEffect, they can now manage state and handle side effects, making them more concise. They also use the useRef hook to prevent the need for DOM interaction.
While there is no major performance difference between the two, functional components have become the favored choice because to their ease of use, reusability, and the better state management capabilities provided by hooks.
Higher order components
Higher Order Components (HOCs) in React are functions that take a component and return a new component with enhanced functionality. HOCs allow you to reuse component logic, share code between components, and apply cross-cutting concerns like data fetching or authentication.
Common hooks and their use cases
- useState(): Manages state in functional components.
- useEffect(): Handles side effects in functional components, such as data fetching, subscriptions, or manual DOM manipulations.
- useContext(): Allows functional components to consume values from the context without prop drilling.
- useCallback() & useMemo(): Memoizes functions and values to optimize performance.
- useRef(): Creates a mutable object that persists across renders. It is often used to access and interact with the DOM directly, store mutable values without triggering re-renders, or persist values between renders without causing re-renders.
Fragments and their use cases
Fragments (<React.Fragment> or <>...</>) allows grouping multiple elements without introducing an additional DOM element. Useful when returning multiple elements from a component.
Batching in react
React batches state updates and DOM manipulations for performance. Instead of immediately updating the DOM for each state change, React schedules updates and performs them in batches.
What is Prop drilling and how to avoid it
Prop drilling occurs when props are passed down through multiple levels of components. To avoid it, you can use context or state management libraries like Redux.
Why can't browsers read JSX? How can browsers be made to read JSX?
Browsers can't understand JSX directly because it's a syntax extension for JavaScript. JSX needs to be translated into regular JavaScript using a tool like Babel before it can be understood by browsers.
Difference between stateful component and stateless component?
- Stateful Component: Contains and manages state, often using class components.
- Stateless Component: Also known as functional components, these don't have state and are primarily responsible for presenting UI.
Difference between Controlled & Uncontrolled components/inputs?
- Controlled Component: The form data is controlled by React state. Changes are handled by React state and reflected in the UI.
- Uncontrolled Component: The form data is handled by the DOM itself. Refs are often used to interact with the DOM directly.
What is Strict mode in react?
Strict Mode is a tool for highlighting potential problems in an application. It performs additional checks and warnings during development to help identify and fix common mistakes.