React useEffect() hook introduction 🌟

#react #tutorial #course
00:00:00 introduction
00:02:00 setup
00:03:25 no dependencies
00:04:50 empty dependency array
00:05:51 1 dependency
00:07:25 multiple dependencies
00:09:57 why use useEffect()?
00:11:33 example 2
00:15:51 return
00:17:31 multiple useEffect() hooks
00:18:52 conclusion
// useEffect()
// React Hook that tells React to DO THIS CODE WHEN:
// (pick one)
// This component re-renders
// This component mounts
// The state of a value changes
// useEffect(function, [dependencies])
// USES
// #1 Event Listeners
// #2 DOM manipulation
// #3 Subscriptions (real-time updates)
// #4 Fetching Data from an API
// #5 Clean up when a component unmounts

[@BroCodez]

import React, {useState, useEffect} from "react"; function MyComponent() { const [width, setWidth] = useState(window.innerWidth); const [height, setHeight] = useState(window.innerHeight); useEffect(() => { window.addEventListener("resize", handleResize); console.log("EVENT LISTENER ADDED"); return () => { window.removeEventListener("resize", handleResize); console.log("EVENT LISTENER REMOVED"); } }, []); useEffect(() => { document.title = `Size: ${width} x ${height}`; }, [width, height]); function handleResize(){ setWidth(window.innerWidth); setHeight(window.innerHeight); } return ( Window Width: {width}px Window Height: {height}px ); } export default MyComponent;

[@rumanhasan27]

[@MO-vr1mw]

Can you do Laravel please

[@elitegaming8565]

first, Subsciber from 2 years Your Javascript and Python Course is The Best Love from India ❤❤❤❤

[@dasdisdus774]

This is the only tutorial (especially useEffect) that I can easily understand than others. Thank you so much Bra Code 🙏

[@karan0611]

bro code bro 😅

[@akkun_25]

I appreciate you so much bro helping us out and taking from your time to teach us coding for free and gathering money for kids from your videos all that and doing that in a fun way for viewers W man W to your parents

[@arcaneacademia]

You explain things in a simple and straightforward way.

[@hananfadah]

The best introduction! Thank you! 😃

[@milleniummoses]

This is my fourth tutorial on this subject ad neth first one I really grasped. Thank you for your time.

[@Pywyoyuyp]

This tutorial was on point. Thx! Now I am ready for a more complex examples!

[@houdariyad4889]

Our Bro is the best as always !Appreciate ur effort ! Don't know what to do without ur videos 💓 Lots of Love from Morocco 🌷🌷

[@kathikr9360]

thanks for the amazing work brother

[@martinemmerson2809]

Hi Bro, love this course on React 👍👍. Hope you can keep going into more advanced levels. 👍👍

[@durgfestivalvibes]

great video bro!!

[@MusaMuhammedOlayinka]

Thank you 😊

[@LazizbekTurayev-bs8by]

thank you bro code you have helped alot to me

[@marybenish9716]

Amazing

[@minkhant4167]

thank you you are the best

[@bostongreen1629]

Exceptional in the way you teach. Any chance to have the codes of the examples provided?

[@KBHASKAR-]

Thanks

[@FrostyBlue1712]

Hey Bro, Noice vid

[@Vincent_12770]

After reacjs series could you please introduce nodejs or even golang series.... mostly for microservices

[@zahersankari7342]

you're a legend!

[@codegenesis2130]

Hi bro thank you so much for this. Can you please make a detailed react course instead of individual video about topics? Please make a video on next js also.

[@Build33_Studio]

Bro code pls reply to me i love your work❤❤❤🎉🎉🎉

[@KingOfMadnesss]

You should do a course on SFML (A C++ library)

[@Niyaz_karma]

Where would you learn to code if you started over❤❤

[@NoTimeWaste1]

1:51 This is one of the reason why I came here

[@andromilk2634]

By the way, wouldn't using document.title = ... directly in the component be equivalent to useEffect(() =­> {document.title = ...}) ? In both cases, they are executed after each rerender?

[@BishanTamang-rk5ji]

Make java 2024 plz....Big fan love from Nepal

[@user-oy2mi4oz7t]

does this happen only in react js part of code ? i mean the millions of added listeners .. or it happens in normal js file too ?

[@andromilk2634]

The only thing which I'm not sure of following is when does exactly a component unmount? Is this something which you manually have to do? Since you were able to change the title of your window by listening to the event, then I assume it never unmounted? (In other words, unmounting is done manually by you?) thanks

[@rishabhkedia9304]

Please make Reactjs projects as well

[@suwanthadarshana8495]

Can you do spring boot series

[@MagnusAnand]

Have you tried htmx ??

[@hawkar7kurdish440]

what is Side Effect? please someone explain briefly

[@mk-vg1mx]

[@ruslangilyazov7733]

I appreciate you so much

[@MO-vr1mw]

Can you do Laravel please

[@rifatmunna]

can you make redux video?

[@AIZEN155]

Fu*k logic mathematique , code bro is the best

[@warlordff2395]

69th like🤪

[@Albert_Hall]

Very interesting and easy absorbable narration 🎉 Express: (i) => { Sincere gratitude }