Тёмный

React useEffect() hook introduction 🌟 

Bro Code
Подписаться 1,9 млн
Просмотров 18 тыс.
50% 1

#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

Опубликовано:

 

3 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 38   
@BroCodez
@BroCodez 6 месяцев назад
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
@rumanhasan27 6 месяцев назад
@MO-vr1mw
@MO-vr1mw 5 месяцев назад
Can you do Laravel please
@dasdisdus774
@dasdisdus774 15 дней назад
This is the only tutorial (especially useEffect) that I can easily understand than others. Thank you so much Bra Code 🙏
@elitegaming8565
@elitegaming8565 6 месяцев назад
first, Subsciber from 2 years Your Javascript and Python Course is The Best Love from India ❤❤❤❤
@hananfadah
@hananfadah 5 месяцев назад
The best introduction! Thank you! 😃
@arcaneacademia
@arcaneacademia 2 месяца назад
You explain things in a simple and straightforward way.
@akkun_25
@akkun_25 5 месяцев назад
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
@Pywyoyuyp
@Pywyoyuyp 14 дней назад
This tutorial was on point. Thx! Now I am ready for a more complex examples!
@houdariyad4889
@houdariyad4889 5 месяцев назад
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
@kathikr9360 2 месяца назад
thanks for the amazing work brother
@martinemmerson2809
@martinemmerson2809 5 месяцев назад
Hi Bro, love this course on React 👍👍. Hope you can keep going into more advanced levels. 👍👍
@marybenish9716
@marybenish9716 5 месяцев назад
Amazing
@LazizbekTurayev-bs8by
@LazizbekTurayev-bs8by 2 месяца назад
thank you bro code you have helped alot to me
@MusaMuhammedOlayinka
@MusaMuhammedOlayinka 4 месяца назад
Thank you 😊
@minkhant4167
@minkhant4167 3 месяца назад
thank you you are the best
@durgfestivalvibes
@durgfestivalvibes 22 дня назад
great video bro!!
@KBHASKAR-
@KBHASKAR- Месяц назад
Thanks
@bostongreen1629
@bostongreen1629 11 дней назад
Exceptional in the way you teach. Any chance to have the codes of the examples provided?
@codegenesis2130
@codegenesis2130 6 месяцев назад
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
@Build33_Studio 6 месяцев назад
Bro code pls reply to me i love your work❤❤❤🎉🎉🎉
@Niyaz_karma
@Niyaz_karma 6 месяцев назад
Where would you learn to code if you started over❤❤
@KingOfMadnesss
@KingOfMadnesss 5 месяцев назад
You should do a course on SFML (A C++ library)
@FrostyBlue1712
@FrostyBlue1712 6 месяцев назад
Hey Bro, Noice vid
@Vincent_12770
@Vincent_12770 5 месяцев назад
After reacjs series could you please introduce nodejs or even golang series.... mostly for microservices
@BishanTamang-rk5ji
@BishanTamang-rk5ji 5 месяцев назад
Make java 2024 plz....Big fan love from Nepal
@rishabhkedia9304
@rishabhkedia9304 5 месяцев назад
Please make Reactjs projects as well
@suwanthadarshana8495
@suwanthadarshana8495 5 месяцев назад
Can you do spring boot series
@andromilk2634
@andromilk2634 4 месяца назад
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
@andromilk2634
@andromilk2634 4 месяца назад
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?
@MagnusAnand
@MagnusAnand 5 месяцев назад
Have you tried htmx ??
@hawkar7kurdish440
@hawkar7kurdish440 3 дня назад
what is Side Effect? please someone explain briefly
@MO-vr1mw
@MO-vr1mw 5 месяцев назад
Can you do Laravel please
@rifatmunna
@rifatmunna 5 месяцев назад
can you make redux video?
@ruslangilyazov7733
@ruslangilyazov7733 4 месяца назад
I appreciate you so much
@AIZEN155
@AIZEN155 6 месяцев назад
Fu*k logic mathematique , code bro is the best
@warlordff2395
@warlordff2395 5 месяцев назад
69th like🤪
@Albert_Hall
@Albert_Hall 2 месяца назад
Very interesting and easy absorbable narration 🎉 Express: (i) => { Sincere gratitude }
Далее
Build a DIGITAL CLOCK using React in 15 minutes! 🕒
16:00
React useRef() hook introduction 🗳️
11:18
Просмотров 12 тыс.
СПРАВКА ДЛЯ УНИВЕРА
00:44
Просмотров 372 тыс.
Incredible magic 🤯✨
00:53
Просмотров 3,4 млн
Рыбачка
00:14
Просмотров 16 тыс.
Javascript Content Toggling
42:04
Просмотров 81
How to take control of Flexbox
16:01
Просмотров 115 тыс.
React useContext() hook introduction 🧗‍♂️
11:37
Writing My Own Database From Scratch
42:00
Просмотров 149 тыс.
Generics: The most intimidating TypeScript feature
18:19
All The JavaScript You Need To Know For React
28:00
Просмотров 568 тыс.
СПРАВКА ДЛЯ УНИВЕРА
00:44
Просмотров 372 тыс.