Higer Order Components 1. What is HOC An HOC is a function in React that takes a component and returns a new component with additional props or functionality. It’s a pattern used to share common functionality between components without altering their structure. 2. Example of HOC Suppose you want to add a “featured” or “promoted” label to some restaurant cards. You can create an HOC that adds this label based on certain conditions....
1. What is Redux? Redux is a state management library for JavaScript applications. It helps manage the state of an application in a predictable way using a single store. Redux follows a unidirectional data flow and relies on actions, reducers, and a store to handle state changes. Core Concepts: Store: Holds the application state. Actions: Payloads of information that send data from the application to the store. Reducers: Functions that specify how the state changes in response to actions....
1. Why We Test Our Application? Ensure Functionality: Verify that the application works as intended and meets the requirements. Catch Bugs Early: Identify and fix issues before they reach production. Improve Code Quality: Encourage better coding practices and design. Facilitate Refactoring: Make changes to the codebase with confidence that existing functionality is preserved. Document Behavior: Serve as documentation for how the code should behave. 2. Manual Testing Involves manually executing test cases without the use of automation tools....
Error Boundaries Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire component tree. Creating an Error Boundary: class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError() { // Update state so the next render will show the fallback UI return { hasError: true }; } componentDidCatch(error, errorInfo) { // You can also log the error to an error reporting service console....
Component Nesting in React export default function ParentComponent(props) { function InnerComponent() { // ... } return ( <> <InnerComponent /> </> ); } As you can see, InnerComponent is inside ParentComponent–this is component nesting. This may seem convenient to code, but it has some problems you can’t export InnerComponent & ParentComponent is lesser re-usable. Performance issue–InnerComponent will be recreated on each render of ParentComponent You can create a seperate module for InnerComponent or just write it outside ParentComponent...