State is an object managed within a component that holds information that may change over the component's lifecycle. Unlike props, which are passed to a component from its parent, state is local to the component and can be updated with the setState method in class components or the useState hook in functional components.

Differences between State and Props:

State:

• Managed within the component.
• Mutable (can be changed).
• Used to manage dynamic data that affects the component’s rendering.

Example:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

Props:

• Passed from parent to child components.
• Immutable (cannot be changed by the receiving component).
• Used to pass data and event handlers down the component tree.

Example:

function DisplayMessage(props) {
  return 
{props.message}
;
}

function ParentComponent() {
  return ;
}

The Context API in React provides a way to pass data through the component tree without having to pass props down manually at every level. It is useful for sharing data that needs to be accessed by many components at different nesting levels, such as themes, user authentication, or locale settings.

Usage:

Create a Context:

const MyContext = React.createContext();

Provide Context Value:

function App() {
  return (
    
      
    
  );
}

Consume Context Value:

Using Context.Consumer :

function ChildComponent() {
  return (
    
      {value => 
{value}
}
    
  );
}

Using useContext Hook (functional components):

function ChildComponent() {
  const value = React.useContext(MyContext);
  return 
{value}
;
}

Event handling in React is similar to handling events in DOM elements but with some syntactic differences. React events are named using camelCase, and you pass a function as the event handler rather than a string.

Example:

class ClickComponent extends React.Component {
  handleClick = () => {
    alert('Button clicked!');
  }

  render() {
    return (
      Click me
    );
  }
}

In functional components, you can handle events using hooks:

function ClickComponent() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    Click me
  );
}

A higher-order component (HOC) is a function that takes a component and returns a new component with additional props or functionality. HOCs are used to reuse component logic.

Example:

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted:', WrappedComponent.name);
    }

    render() {
      return ;
    }
  };
}

const EnhancedComponent = withLogging(MyComponent);

In this example, withLogging is an HOC that adds logging functionality to the MyComponent component.

React fragments let you group a list of children without adding extra nodes to the DOM. This is useful when rendering multiple elements from a component without wrapping them in an extra div or other container element.

Example:

function FragmentComponent() {
  return (
    
      
Title
      
Description
    
  );
}

Shorthand syntax for fragments:

function FragmentComponent() {
  return (
    <>
      
Title
      
Description
    
  );
}

Fragments are used to avoid unnecessary HTML elements in the DOM, which can simplify CSS styling and improve performance.

The useEffect hook allows you to perform side effects in functional components. Side effects include data fetching, subscriptions, and manually changing the DOM. useEffect runs after the render and ensures the component logic is separate from the side effects.

Syntax:

useEffect(() => {
  // Side effect logic
  return () => {
    // Cleanup logic
  };
}, [dependencies]);

Parameters:

• Effect function: A function containing the side effect logic.
• Dependencies array (optional): An array of values that the effect depends on. The effect will only re-run if one of these values changes.

Example:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Only re-run the effect if count changes

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>Click me
    
  );
}

The useState hook allows you to add state to functional components. It returns an array containing the current state value and a function to update that state.

Syntax:

const [state, setState] = useState(initialState);

Parameters:

• initialState: The initial state value.

Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>Click me
    
  );
}

In this example, count is the state variable and setCount is the function to update count . The initial state is set to 0.

Lifting state up is a pattern in React where you move state from child components to their closest common ancestor. This allows multiple components to share and synchronize their state.

Scenario: Suppose you have two sibling components that need to share the same state. Instead of managing state separately in each component, you lift the state up to their parent component and pass it down as props.

Example:

function ParentComponent() {
  const [sharedState, setSharedState] = useState('');

  return (
    

      
      
    
  );
}

function ChildComponentA({ sharedState, setSharedState }) {
  return (
     setSharedState(e.target.value)} />
  );
}

function ChildComponentB({ sharedState }) {
  return (
    
{sharedState}
  );
}

In this example, sharedState is lifted up to ParentComponent , allowing both ChildComponentA and ChildComponentB to access and synchronize the state.

Controlled Components: These are components where React controls the form elements by keeping the form data in the component state. The value of the form element is set by the state and updated via events.

Example:

function ControlledInput() {
  const [value, setValue] = useState('');

  return (
     setValue(e.target.value)} />
  );
}

Uncontrolled Components: These are components where the form data is handled by the DOM itself. You can use a ref to access the form values.

Example:

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    alert(inputRef.current.value);
  };

  return (
    

      
      Submit
    
  );
}

Controlled components are preferred because they provide a more predictable and manageable way to handle form inputs.

To optimize performance in a large React application, you can follow these best practices:

• Memoization: Use React.memo to memoize functional components to prevent unnecessary re-renders.

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

• useCallback and useMemo: Use useCallback to memoize callback functions.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

• Use useMemo to memoize expensive calculations.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• Code Splitting: Use dynamic import statements and React.lazy to load components lazily.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

• Virtualization: Use libraries like react-window or react-virtualized to render only visible items in a large list.
• Avoid Anonymous Functions in JSX: Define functions outside of JSX to prevent re-creation on every render.

function handleClick() {
  // handle click
}

return Click me;

• Avoid Unnecessary Re-renders: Use shouldComponentUpdate or React.PureComponent in class components and React.memo in functional components.
• Use Profiler: Use React's Profiler to identify performance bottlenecks.

By applying these techniques, you can significantly improve the performance of your React application.

React Portals provide a way to render children into a DOM node that exists outside the hierarchy of the parent component. They are useful for scenarios where you need to break out of the normal DOM hierarchy, such as rendering modals, tooltips, or dropdowns that overlay other content.

Syntax:

ReactDOM.createPortal(child, container);

Example:

import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    

      {children}
    
,
    document.getElementById('modal-root')
  );
}

function App() {
  return (
    

      
App Component
      
        
This is a modal content
      
    
  );
}

In this example, the modal content is rendered into the modal-root div, which is outside the normal DOM hierarchy of the App component.

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 the component tree that crashed. They help prevent the entire application from crashing due to an error in a part of the UI.

Implementation:

Create an Error Boundary Component:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log error details
    console.error("Error caught by Error Boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return 
Something went wrong.
;
    }

    return this.props.children;
  }
}

Wrap Your Components with Error Boundary:

function App() {
  return (
    
      
    
  );
}

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Reconciliation is the process by which React updates the DOM with the results of render output. When the state or props of a component change, React compares the newly returned element with the previously rendered one and updates the actual DOM only where there are differences.

Steps in Reconciliation:

• Diffing Algorithm: React compares the new VDOM with the previous VDOM. It uses heuristics to make this process efficient.
• Elements of different types produce different trees (e.g.,
  to ).
• Elements of the same type stay in the same tree and their attributes are updated.
• Component Updates: If a component's state changes, React re-renders that component and all its children.
• Key Attribute: For lists, the key attribute helps React identify which items have changed, are added, or are removed.

Example:

function App() {
  const [items, setItems] = useState(['A', 'B', 'C']);

  return (
    

      {items.map(item => (
        
{item}
      ))}
    
  );
}

Using keys, React can efficiently update the list when items are added, removed, or reordered.

The useReducer hook is an alternative to useState for managing complex state logic in functional components. It is particularly useful when the state depends on previous state values or when multiple state transitions share logic.

Syntax:

const [state, dispatch] = useReducer(reducer, initialState);

Parameters:

• reducer: A function that takes the current state and an action, and returns a new state.
• initialState: The initial state value.

Example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    

      
Count: {state.count}
       dispatch({ type: 'increment' })}>Increment
       dispatch({ type: 'decrement' })}>Decrement
    
  );
}

In this example, useReducer manages the state transitions based on the dispatched actions.

componentDidMount is a lifecycle method used in class components, while useEffect is a hook used in functional components. Both are used to perform side effects, such as data fetching, subscriptions, or manually modifying the DOM, after the component has been rendered to the DOM.

componentDidMount:

• Usage: Only available in class components.
• Timing: Invoked once, immediately after the component is mounted (inserted into the tree).

Example:

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component did mount');
  }

  render() {
    return 
Hello, World!
;
  }
}

useEffect:

• Usage: Available in functional components.
• Timing: By default, runs after every render. Can be configured to run only once or when specific dependencies change.

Example:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Component did mount');
  }, []); // Empty array means it runs once after the initial render

  return 
Hello, World!
;
}

Differences:

• Class vs. Functional: componentDidMount is for class components, while useEffect is for functional components.
• Flexibility: useEffect can handle multiple effects and can be configured to run based on dependencies.
• Cleanup: In useEffect , you can return a cleanup function that runs when the component is unmounted or before the effect runs again.