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] =

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);

}

return (<>
<p>Window Width: {width}px</p>
<p>Window Height: {height}px</p>
</>);
}

export default MyComponent;

[dasdisdus]

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

[milleniummoses]

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

[elitegaming]

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

Love from India ❤❤❤❤

[akkun_]

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.

[Pywyoyuyp]

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

[houdariyad]

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

[martinemmerson]

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

[LazizbekTurayev-bsby]

thank you bro code you have helped alot to me

[bostongreen]

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

[KingOfMadnesss]

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

[codegenesis]

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.

[Vincent_]

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

[Niyaz_karma]

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

[BishanTamang-rkji]

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

[Build_Studio]

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

[NoTimeWaste]

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

[andromilk]

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

[andromilk]

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?