React Advanced - Class 4

Lecture 62 :- React Advanced - Class 4

In "React Advanced - Class 4," we'll continue exploring more advanced React concepts and build on what we learned in the previous classes. We'll cover topics such as React suspense, lazy loading images, and advanced patterns like compound components and render props.

Step 1: React Suspense

React Suspense is a feature that allows you to handle loading states for lazy-loaded components and data fetching. It's useful for improving the user experience by showing fallback content while waiting for data or code to load.

jsxCopy code

import React, { Suspense } from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; const Home = React.lazy(() => import('./Home')); const About = React.lazy(() => import('./About')); const Products = React.lazy(() => import('./Products')); function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>            <li>              <Link to="/products">Products</Link>            </li>          </ul>        </nav>        <Suspense fallback={<div>Loading...</div>}>          <Route exact path="/" component={Home} />          <Route path="/about" component={About} />          <Route path="/products" component={Products} />        </Suspense>      </div>    </Router>  ); } export default App;

In this example, we use React.lazy to lazily load the Home, About, and Products components and wrap them with a Suspense component. The fallback prop of Suspense specifies the content to display while waiting for the lazy-loaded components to load.

Step 2: Lazy Loading Images

Lazy loading images can improve performance by loading images only when they are about to become visible in the viewport.

jsxCopy code

import React, { useRef, useEffect, useState } from 'react'; const LazyImage = ({ src, alt }) => {  const imgRef = useRef(null);  const [isVisible, setIsVisible] = useState(false);  const handleObserver = (entries) => {    const [entry] = entries;    setIsVisible(entry.isIntersecting);  };  useEffect(() => {    const observer = new IntersectionObserver(handleObserver, {      root: null,      rootMargin: '0px',      threshold: 0.1, // Adjust the threshold as needed    });    if (imgRef.current) {      observer.observe(imgRef.current);    }    return () => {      if (imgRef.current) {        observer.unobserve(imgRef.current);      }    };  }, []);  return (    <img      ref={imgRef}      src={isVisible ? src : ''}      alt={alt}      style={{ display: isVisible ? 'block' : 'none' }}    />  ); }; export default LazyImage;

In this example, we use the IntersectionObserver API to determine if the image is visible in the viewport. The isVisible state determines whether the image should be displayed or not.

Step 3: Compound Components

Compound components are a pattern in React that allows you to create components with multiple child components while still maintaining a shared state.

jsxCopy code

import React, { createContext, useState, useContext } from 'react'; const ToggleContext = createContext(); const Toggle = ({ children }) => {  const [on, setOn] = useState(false);  const toggle = () => {    setOn((prevState) => !prevState);  };  return (    <ToggleContext.Provider value={{ on, toggle }}>      {children}    </ToggleContext.Provider>  ); }; const On = ({ children }) => {  const { on } = useContext(ToggleContext);  return on ? children : null; }; const Off = ({ children }) => {  const { on } = useContext(ToggleContext);  return on ? null : children; }; const Button = () => {  const { on, toggle } = useContext(ToggleContext);  return <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>; }; const App = () => {  return (    <Toggle>      <div>        <h1>Compound Components</h1>        <On>          <h2>The button is ON</h2>        </On>        <Off>          <h2>The button is OFF</h2>        </Off>        <Button />      </div>    </Toggle>  ); }; export default App;

In this example, we create a Toggle component that manages the state of the on/off toggle. The On, Off, and Button components are rendered within the ToggleContext.Provider and can access and modify the state of the Toggle component.

Step 4: Render Props

Render props is another pattern in React that allows you to pass a function as a prop to a component. This function returns the content that the component should render.

jsxCopy code

import React, { useState } from 'react'; const Toggle = ({ render }) => {  const [on, setOn] = useState(false);  const toggle = () => {    setOn((prevState) => !prevState);  };  return render({ on, toggle }); }; const App = () => {  return (    <div>      <h1>Render Props</h1>      <Toggle        render={({ on, toggle }) => (          <div>            {on ? <h2>The button is ON</h2> : <h2>The button is OFF</h2>}            <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>          </div>        )}      />    </div>  ); }; export default App;

In this example, the Toggle component receives a render prop that takes a function. The on and toggle values are passed as arguments to this function, which returns the content to be rendered.

Congratulations! You've completed the fourth class of React Advanced. You've learned about React Suspense, lazy loading images, and advanced patterns like compound components and render props.

React offers a wide range of tools and patterns to build highly dynamic and optimized applications. As you continue your React journey, you can explore more advanced topics like server-side rendering (SSR), integrating with state management libraries like Redux or MobX, and using custom hooks to extract reusable logic.

Keep practicing, building more complex applications, and exploring the vast possibilities of React! Happy coding!