|
Question: What are controlled and uncontrolled components in React?
|
Answer: Find below:
• Controlled components: Controlled components are components whose form elements like input, textarea, and select are
controlled by React state. Changes to the form elements are handled by React, and their current state is kept in sync with the component's state.
This allows React to have full control over the form elements.
• Uncontrolled components: Uncontrolled components are components where form elements maintain their own state internally,
without relying on React state. They are typically used when you need to integrate React with non-React code or when you
want to handle form data imperatively rather than declaratively.
|
|
Question: What is the purpose of the 'key' prop in React?
|
Answer: The 'key' prop is a special attributes used by React to identify each element in a list.
They help React identify which items have changed, are added, or are removed. Keys should be unique among siblings
but don't need to be globally unique.
Using keys correctly helps React optimize the rendering process and improves performance..
|
|
Question: What is the purpose of 'setState()' in React?
|
Answer: The 'setState()' is a method provided by React to update the state of a component.
When one calls setState(), React schedules an update to the component's state, which triggers a re-render of the
component and its children.
It is the primary way to update state in React components, and it can accept an object or a function as an argument to update the state.
|
|
|
|
|
|
Question: Can you explain the concept of lifting state up in React?
|
Answer: The lifting state up is a pattern in React where the state is moved from a child component to its
parent component. This is useful when multiple components need access to the same state or when the state affects multiple components.
By lifting state up to a common ancestor, components can share state through props, leading to better encapsulation and data flow management.
|
|
Question: What is React context and when to use it?
|
Answer: React context is a feature that allows data to be passed through the component tree without having
to pass props manually at every level. It provides a way to share values like themes, language preferences, or authentication
status across components.
Context is useful when you have data that needs to be accessed by many components at different levels of the component tree.
|
|
Question: Can you explain the difference between PureComponent and Component in React?
|
Answer: Here is the diffrence:
• Component: The base class for React components. It implements the shouldComponentUpdate() method, which
by default returns true, causing the component to re-render whenever setState() is called or its parent re-renders.
• PureComponent: A subclass of Component that implements shouldComponentUpdate() with a shallow prop
and state comparison. It prevents unnecessary re-renders by performing a shallow comparison of props and state, and
only re-renders if there are differences. PureComponent is useful for optimizing performance in components that rely on props and state.
|
|
|
|
|
|
Question: What is the role of React.Fragment?
|
Answer: The React.Fragment is a built-in component in React that provides a way to group multiple elements
without adding extra nodes to the DOM. It allows one to return multiple elements from a component's render method
without needing to wrap them in a single parent element.
Fragments are especially useful when you need to return adjacent JSX elements from a component.
|