React Essentials:-PART 5

Q: What is the difference between Named export, Default export, and * as export?

Named Export

• Purpose: Allows you to export multiple values from a module.

• Syntax: Uses export keyword followed by declarations.

• Import Syntax: Must use curly braces {} to specify which named exports to import. The imported names must match the exported names.

• Example:

    // MyComponent.js
    export const MyComponent = () => {};
    export const MyComponent2 = () => {};
  
    // Importing in another file
    import { MyComponent, MyComponent2 } from './MyComponent';
  
    // Aliasing a named import
    import { MyComponent2 as MyNewComponent } from './MyComponent';
  

Default Export

• Purpose: Allows you to export a single value from a module as the default export.

• Syntax: Uses export default followed by the value to export.

• Import Syntax: Does not use curly braces. You can name the import anything you want.

• Example:

    // MyComponent.js
    const MyComponent = () => {};
    export default MyComponent;
  
    // Importing in another file
    import MyComponent from './MyComponent';
  

* as Export

• Purpose: Allows you to import all named exports from a module as properties of an object.

• Syntax: Uses import * as followed by the desired alias.

• Example:

    // MyComponent.js
    export const MyComponent = () => {};
    export const MyComponent2 = () => {};
    export const MyComponent3 = () => {};
  
    // Importing in another file
    import * as MainComponents from './MyComponent';
  
    // Using the imported components
    <MainComponents.MyComponent />
    <MainComponents.MyComponent2 />
    <MainComponents.MyComponent3 />
  

Combining Named and Default Exports

• Purpose: You can have both named exports and a default export in the same module.

• Example:

    // MyComponent.js
    export const MyComponent2 = () => {};
    const MyComponent = () => {};
    export default MyComponent;
  
    // Importing in another file
    import MyComponent, { MyComponent2 } from './MyComponent';
  

Q: What are React Hooks?

Overview

React Hooks, introduced in React 16.8, are functions that let you use state and other React features in functional components. They enable stateful logic without needing to convert functional components into class components.

Standard Built-in Hooks

• useState: Manages state within a functional component.

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

• useEffect: Manages side-effects like data fetching, subscriptions, and manually changing the DOM.

    useEffect(() => {
      // side-effect code
    }, [dependencies]);
  

• useContext: Provides access to the current context value.

    const contextValue = useContext(MyContext);
  

• useReducer: An alternative to useState for more complex state logic.

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

• useCallback: Memoizes a callback function to prevent unnecessary re-renders.

    const memoizedCallback = useCallback(() => {
      // callback code
    }, [dependencies]);
  

• useMemo: Memoizes a value to optimize performance.

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

• useRef: Creates a mutable ref object that persists across renders.

    const refContainer = useRef(initialValue);
  

• useLayoutEffect: Runs synchronously after all DOM mutations. Prefer useEffect for most side-effects.

    useLayoutEffect(() => {
      // synchronous side-effect code
    }, [dependencies]);
  

• useDebugValue: Provides custom debug values for custom hooks.

    useDebugValue(value);
  

Q: Why do we need useState Hook?

Purpose

The useState hook is essential for managing state in functional components. It provides a way to preserve values across renders and react to changes, enabling dynamic and interactive UI components.

Usage

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

• Importing: import { useState } from 'react';

• Example:

    import React, { useState } from 'react';
  
    const Counter = () => {
      const [count, setCount] = useState(0);
  
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      );
    };
  

The useState hook allows functional components to have local state, making them powerful and flexible for building dynamic user interfaces.