React Advanced - Class 4

Dear Sciaku Learner you are not logged in or not enrolled in this course.

Please Click on login or enroll now button.

If you have any query feel free to chat us!

Happy Coding! Happy Learning!

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!

15. React Advance

23 Comments

@familyvimes@gmail.com
[email protected] Jul 22, 2024 at 10:33 PM

Kindly check the lecture number 6. Lifecycle of a Change in 1. Git and Github The above lecture is not related to the course please update it ASAP Thank you

@harshp.cs.22
harshp.cs.22 Jul 10, 2024 at 3:37 PM

From where can I download the files which love babbar says he has uploaded on dashboard ??

@familyvimes@gmail.com
[email protected] Jul 23, 2024 at 12:05 PM

I have attached the link https://github.com/lakshayk12/ANN_optimization_BTP

@zubaid.zu
zubaid.zu May 9, 2024 at 2:42 AM

Paid for the course but it still locked, can solve this problem please, when you take the payment the couse should be unlocked, evey time i have to message for any purchase

@admin79
admin79 May 10, 2024 at 10:29 PM

Now your Paypal payment is accepted and your course is activated successfully. Please leave your valuable feedback.

@anandwising
anandwising Mar 12, 2024 at 4:05 PM

Why i am being asked for payment if i am already enrolled in the course

@admin79
admin79 Mar 12, 2024 at 5:22 PM

Dear anand, your payment is now updated check your course, apologize for several delays. Please leave your valuable feedback.

@anandwising
anandwising Mar 12, 2024 at 8:33 PM

thanks its working now

@Megha
Megha Feb 22, 2024 at 11:02 PM

hello ,I have a doubt

@akshaykumrawat99
akshaykumrawat99 Feb 22, 2024 at 10:56 PM

hello i have a doubt

@rajnireddyatr
rajnireddyatr Feb 3, 2024 at 12:08 AM

hi

@talha.developments
talha.developments Jan 18, 2024 at 9:34 PM

I'm paying through my Card, but it giving an error. why ? how we can purchase a course in Pakistan. Paypal is banned here

@aryangrg020
aryangrg020 Jan 17, 2024 at 10:25 PM

can we download the videos

@Krishanpal
Krishanpal Jan 14, 2024 at 8:12 PM

i done my payment for mern stack development love babbar but cant acces to course kindly give me access

@sciaku1
sciaku1 Jan 17, 2024 at 12:28 PM

Dear Krishnapal your payment is already accepted go and check back.

@shivanshgautam220
shivanshgautam220 Jan 10, 2024 at 4:57 PM

Why i am being asked for payment if i am already enrolled in the course

@sciaku1
sciaku1 Jan 11, 2024 at 3:18 PM

Dear Shivansh, if you already done your payment then contact us on our official Email id [email protected] or reply here.

@p8354046
p8354046 Jan 7, 2024 at 3:47 PM

Why i am being asked for payment if i am already enrolled in the course

@sciaku1
sciaku1 Jan 11, 2024 at 3:19 PM

Dear p8354046, if you already done your payment then contact us on our official Email id [email protected] or reply here.

@myidontablet
myidontablet Dec 30, 2023 at 4:28 PM

Why i am being asked for payment if i am already enrolled in the course

@sciaku1
sciaku1 Jan 6, 2024 at 1:42 AM

Dear, Don't worry now your problem is solved check your id.

@duabhi911
duabhi911 Nov 16, 2023 at 2:03 AM

Why i am being asked for payment if i am already enrolled in the course

@harshp.cs.22
harshp.cs.22 Dec 23, 2023 at 11:40 AM

Yes bro

@myidontablet
myidontablet Dec 30, 2023 at 4:28 PM

I'm facing same issue

@sciaku1
sciaku1 Jan 6, 2024 at 1:43 AM

Dear, Don't worry now your problem is solved check your id.

@lenientharsh
lenientharsh Oct 31, 2023 at 10:56 AM

i want debit card option

@lenientharsh
lenientharsh Oct 31, 2023 at 10:51 AM

how can i assure that this is not scam?

@jainarin416
jainarin416 Nov 2, 2023 at 12:37 AM

i have same doubt is this website real or a fraud

@sciaku1
sciaku1 Jan 6, 2024 at 1:45 AM

No its not any fraud. its genuine if you need any proof please contact us via email.

@sciaku1
sciaku1 Jan 6, 2024 at 1:44 AM

No it's not any scam, its genuine if you need any proof please contact us via email.

@hydrarishabh9
hydrarishabh9 Oct 21, 2023 at 11:47 PM

how to do payment ?

@sciaku1
sciaku1 Oct 30, 2023 at 5:34 PM

Click on Watch now button then click next video then payment option is showing

@minhajakram440
minhajakram440 Oct 18, 2023 at 11:18 PM

i am unable to access the video even i have already completed my payment .

@aeromusgyan
aeromusgyan Oct 21, 2023 at 1:17 AM

Your problem is solved

@saklyi70
saklyi70 Sep 30, 2023 at 11:02 AM

plz add codes lecture wise ! it wold be great and helpful also

@sciaku1
sciaku1 Jan 6, 2024 at 1:47 AM

now we have added starter package in lecture 2nd, go now and download it.

@thomasroka31
thomasroka31 Sep 29, 2023 at 4:05 PM

how to view this one

@jitendrakrverma02
jitendrakrverma02 Sep 23, 2023 at 3:57 PM

Why video not play

@sciaku1
sciaku1 Jan 6, 2024 at 1:47 AM

Now it's working.

@9035praveen
9035praveen Sep 2, 2023 at 12:12 PM

Thank you for the access of the videos. It would be greatful if I could no the way to download the videos

@mohammedunaismdr
mohammedunaismdr Sep 25, 2023 at 11:54 AM

Use idm to download

@mishraprajjwal295
mishraprajjwal295 Oct 13, 2023 at 11:07 PM

ok

@rahulkumarbaraswal30
rahulkumarbaraswal30 Nov 4, 2023 at 1:32 PM

Hello bro can you share course with me?

@bicky
bicky Sep 1, 2023 at 5:42 PM

hello everyone

Frequently Asked Questions About Sciaku Courses & Services

Quick answers to common questions about our courses, quizzes, and learning platform

Didn't find what you're looking for?

help_center Contact Support