F8 hướng tới đáp ứng cả những bạn lần đầu học React nên mình sẽ làm chi tiết một chút. Trong các bài sau mình sẽ thêm nhiều ví dụ, mỗi bài mình sẽ giải thích chi tiết từng dòng code, cách logic chạy. Mong các anh em đã từng học qua thông cảm nếu thời lượng dài nhé 😍 Trong này này chúng ta sẽ học về useState trong React hook (React hook 2021) nhé anh em 😍

@khanhduong4716

2 жыл бұрын

Ko phải học lần đầu vẫn mò vào xem đằng sau các hàm nó thực sự đang làm gì, thời nay có x2 x3 speed rồi nên dài 1 tí cũng chả sao cả

@qaqeqe

2 жыл бұрын

Rất dễ hiểu anh. Cảm ơn anh rất nhiều nhé!

@hongsonvu3717

2 жыл бұрын

rất chi tiết và dễ hiểu, cảm ơn bạn !

@nguyenAudio77

2 жыл бұрын

Quý anh Sơn, em nghe bài dễ hiểu vs hút quá

@becode9266

2 жыл бұрын

Anh dạy chi tiết và hay quá ạ 😍😍

Anh là người dạy cực kì có tâm luôn, cái khó hiểu anh diễn giải thật sự dễ hiểu! Cám ơn anh thật nhiều

@F8VNOfficial

5 күн бұрын

Cảm ơn em nhiều nha

15:10 chỗ này rất đúng vì trong doc có nói "the state is only created the first time our component renders" tức là logic trong useState chỉ chạy đúng 1 lần lúc render lần đầu thôi, còn lại ở những lần render sau thì nó sẽ lấy giá trị mới nhất được return từ setCount().

Thật sự coi kênh thầy Sơn càng ngày càng đỉnh luôn, có mấy cái animation trong video khúc đầu xịn xò ghê :))

Em cảm ơn anh Sơn nhiều ạ . Những bài anh giảng rất chi tiết và dễ hiểu giúp một đứa lần đầu học React như em có thể tiếp cận dễ dàng hơn . Em chúc anh nhiều sức khỏe và gặt hái được nhiều thành công ạ.

Bài giảng của a thực sự rất dễ hiểu, giải thích rõ ràng, chi tiết 😊 Cảm ơn và mong a luôn ra những video hay như vậy ạ ❤️

xem trên youtube chủ yếu giúp kênh có thêm lượt view và tương tác, mong kênh bạn có thêm nhiều video hay cho các bạn trẻ có đam mê lập trình

ngày xưa không ai chỉ anh cần học những gì để đi làm . trong khi tự học mà anh còn có kiến thức rộng như vậy . thì a xác định hướng đi kiểu gì vậy ạ (tức là học những gì trước những gì sau ) ..e cám ơn . a giảng rất dễ hiểu .. chúc a có nhiều sức khỏe

wao anh giải thích kỹ cách nó chạy thật là hay quá, dễ hiểu vô cùng luôn ạ

Ui đỉnh quá anh ơi, em đọc docs của trang React mấy nay bị cấn cái flow của useState, xem video của anh hiểu ngay, cảm ơn anh nhiều ạ! Chúc anh ngày mới nhiều niềm vui.

A sơn dạy có tâm thật sự a ơi.

Cảm ơn anh vì bài giảng, nó rất chi tiết, thật sự xây dựng chắc cho em 1 nền tốt để em có thể phát triển thêm sau này, cảm ơn anh,!!!

Anh Sơn đỉnh quá, chỉ cần xem video của anh là hiểu luôn !!!

giang rât loi cuon nguoi nghe, de hieu, chi tiet . tuyet voi !

càng coi lại nhiều lần càng hiểu ra nhiều vấn đề hơn , cảm ơn anh sơn , cảm ơn F8

Bài giảng tuyệt vời !!! Cảm ơn anh Sơn

cám ơn bạn Sơn, bạn làm hướng dẫn rất có tâm.

Thầy giảng hay quá thầy ơi, trong thời gian ngắn sắp tới thầy có thể làm nhiều video hơn về react hooks và redux được không ạ. Em cảm ơn!

Ui a ra luôn, thank a nha, chúc a nhiều sức khỏe ra tiếp ạ

cảm ơn anh ạ hi vọng anh ra thêm nhiều nhiều videos nửa ạ. Rất dể hỉu luôn ạ

Rất chi tiết và cụ thể. Cảm ơn anh.

Chất lượng quá anh ạ

Cảm ơn bài giảng của anh ạ.

seri dạy học quá đỉnh, free mà tốt gấp vạn lần các khóa trả phí, Cảm ơn Sơn rất nhiều nhiều

@NamLe-sl4qy

2 жыл бұрын

haha

Hóng video của anh mãi UwU

dậy hay như này mà k đẹp trai bằng mình, thật đáng tiếc :D :D :D

F8: có tâm, có tầm

hóng quá 😎

Chúc anh nhiều sức khỏe ^^

Love your lesson🥰🥰

Cảm ơn anh Sơn nhiều

hay quá anh 🙏

em cảm ơn anh nhiều!

anh ơi ra nhanh nha . em hóng ghê :>>

Hay anh ơi

hay quá!

cho mình hỏi với hooks thì nên chia state ra thành nhiều state và setState nhỏ, hay là để 1 state nested lớn, cám ơn ạ

Mong anh ra luôn khóa full stack ạ

Anh Sơn ơi cho em hỏi. Các bài tập về phần hook em làm theo anh mà em muốn lưu lại để sau này xem lại thì mỗi phần em tạo một file js rồi mỗi lần em muốn chạy file nào thì em import vào đúng k anh.

Anh có thể giải thích thêm về cái callback trong setState không, em chưa hiểu tại sao mình sao mình lại truyền callback vào hàm setState ấy, nếu mà mình truyền time-1 thì nó chỉ dừng ở 59 và time luôn luôn ỏ 60

em cảm ơn nhé

lâu lâu xem lại hoài lun

E cám ơn bài giảng của a, e lúc đầu tự học useState mà k hiểu bản chất cốt lõi của nó nên hay bị nhầm.

Cmt đầu

Cho mình hỏi là có thể dùng data get được từ useSelector() làm giá trị init cho useState() ko, vì sao và cách fix ạ. Mình cảm ơn

🧡

MÌnh có thêm object vào mãng được không a? a giải đáp giúp e với nhé. ^^ thank a

cái khúc 3 cái countor anh nói cùng 1 giá trị, em cứ nghĩ nó sẽ return từng lần gọi và lưu vào biến count (chỗ detructoring chứ ạ) giúp em với ạ

Mua khóa Evondev mới ra cho em trai học đọc qua với vào xem thử Sơn dạy mới thấy sai lầm khi mua

cho em hỏi mỗi lần muốn làm bài tập thì làm ở đâu ạ nếu mỗi lần làm một bài lại npm dự án react thì hơi bất tiện ạ

Ủa mình lên video kìa

Xem lần 1 khóc tiếng miên 😢 xem lần 2 thông não :D

Em chào thầy Sơn, em có câu hỏi là trong trường hợp giá trị truyền vào đối số setState() bằng với giá trị lúc khởi tạo thì component này có được render lại không ạ. Mong nhận được lời giải đáp từ phía thầy Sơn ạ

@F8VNOfficial

Жыл бұрын

Nếu bằng (===) thì không re-render bạn nhé

em chào anh ạ

a sơn ơi cho em hỏi, vậy trường hợp nào mình sử dụng useState callback và không callback vậy a. e cảm ơn a nhiều

@free2idol1

2 жыл бұрын

cái nào cần tính toán logic như ở 15:46 thì dùng callback, còn ko thì thôi.

setState bên class components tự merge giá trị cũ, bên Hooks quên spread phát ghi đè hơi căng nhỉ 😅

A ơi lúc đó anh chọn chuyên ngành nào của CNTT vậy cho e xin ý kiến với

@hunglemanh6535

Жыл бұрын

ảnh gap year, nghỉ học đại học xong làm trái ngành rồi sau đó tự học lập trình rồi tự đi xin việc đó chứ

😊

hi anh

anh có thể tải source code với file .md lên git đc không ạ?

Trong trường hợp nào mình dùng onClick={()=>handleIncrease()}, onClick={handleIncrease}. Hai cách dùng này có khác nhau không ạ?

1 video cày cỡ 5,6 lần là hiểu

Đã học và hiểu. Cảm ơn thầy Sơn import { useState } from "react"; const orders = [100, 200, 300]; function App() { const [counter, setCounter] = useState(() => { const total = orders.reduce((total, cur) => total + cur); return total; }); const [info, setInfo] = useState({ name: "Nguyen Van A", age: 18, address: "Ha Noi, VN", }); const handleIncrease = () => { setCounter((prevState) => prevState + 1); }; const handleUpdate = () => { setInfo({ ...info, bio: "Yeu mau hong", }); }; return ( {counter} Increase {JSON.stringify(info)} Update ); } export default App;

Chào Thầy Sơn, sao không dùng Setcounter(courter+1) ngay vị trí handleIncrease (nghĩa là không cần viết thêm hàm handleIncrease) ? Cám ơn Thầy ạ,

@F8VNOfficial

Жыл бұрын

Vì trong thực tế logic xử lý nó ko đơn giản chỉ là + 1 như vậy, nhiều dòng code hơn viết ra hàm tưởng minh hơn về ngữ nghĩa, một số trường hợp có thể tái sử dụng hàm. Một số tình huống trong tương lai các bạn đc học sẽ gây re render các component ko cần thiết. Việc tách hàm ra giúp kết hợp sử dụng đc useCallback hook để tối ưu. Một số cái mình nói có thể bạn sẽ được học trong các bài tới.

Cho em hỏi về code foldor tittok đó lấy ở đâu vậy ạ?

vậy là setState() là 1 async function đúng k ạ?

Ah ơi e học trên f8 bằng điện thoại mà sao ko có mục bài tập anh nhỉ?

mình tưởng nếu như vậy thì sẽ thêm liên tục thằng bio vào chứ nhỉ không biết mình nhầm ở đâu

chưa ra video mới luôn à ah

Có ai hiểu rõ giải thích giúp mình nguyên lý chạy của 3 cái setCount dùng callback k nhỉ

anh có thể vd trả dữ liệu con về cha dc ko ạ

18:41 tại sao arrow function có lúc dùng ngoặc () có lúc dùng {} vậy anh?

@tantruongquang5490

2 жыл бұрын

prev => () handleupdate = ()=> {}

cmt t3

hello

Nó được render lại thì em có nghe thuật ngữ " Data binding" phải không anh?

@F8VNOfficial

2 жыл бұрын

Render lại là "re-render", binding data là "ràng buộc dữ liệu" rồi em

@congnamle3632

2 жыл бұрын

​@@F8VNOfficial Dạ vâng em cảm ơn anh. Tại vì em đang ở trường có cho học món AngularJs. Nó lại dùng thuật ngữ data binding trong khi react anh lại dùng từ re-render cập nhật cho nó nhảy số 1,2,3,4 nên em tưởng nó là 1. Em sẽ ngâm cứu lại cái này 😁

@F8VNOfficial

2 жыл бұрын

​@@congnamle3632 Gọi là binding cũng đúng em, nhưng em cần focus vào ý nghĩa của cách người ta dùng từ để hiểu nó đang nói tới điều gì. - Re-render => Nói tới việc component update lại UI để hiển thị giao diện mới - Data binding => Nói tới việc dữ liệu dàng buộc, ví dụ UI bị dàng buộc bởi dữ liệu, khi dữ liệu thay đổi thì UI thay đổi theo Mặc dù nghe có vẻ giống nhau, nhưng để học sâu thì em cần chú ý tới ý nghĩa của nó, vì re-render và data binding là đang nói tới 2 vấn đề khác nhau nhé.

vào time 7:26 nếu thay counter+1 = counter ++ tại sao bấm 2 lần nó mới thay đổi giá trị vậy bạn

@F8VNOfficial

15 күн бұрын

Vì a++ nó trả về giá trị của a trước khi tăng. Tức là a = 1 thì a++ là 1, sau đó bạn dùng a ở biểu thức khác nó mới là 2. Nếu muốn dùng ++ thì bạn viết phía trước, tức là ++a nhé.

a ơi cho em hỏi là tại sao state mình để là const mà vẫn có thể thay đổi giá trị được ạ?

@tubui6639

2 жыл бұрын

mảng là const mà b :D

@Lelouchvv

2 жыл бұрын

@@tubui6639 ok

thầy Sơn ơi sao em console.log() thì trên trình duyệt nó lại in ra 2 lần vậy ạ

@F8VNOfficial

Жыл бұрын

File index.js có StrictMode bạn ơi

Em có đoạn code sau: import { useState } from 'react'; const App = () => { const [x, setX] = useState('a'); const [y, setY] = useState('b'); const [z, setZ] = useState('c'); const [t, setT] = useState('d'); console.log('render: ', x, y, z, t); const handle = () => { setX('c'); setY('d'); setZ('e'); setT('f'); }; return ( Click {x}, {y}, {z}, {t} ); } export default App; Cho em hỏi, tại sao khi em nhấn Click 2 lần thì component re-render 2 lần, dù cả x, y, z, t đều không đổi. Nhưng khi click lần 3 thì lại không re-render nữa ạ. Em cảm ơn.

@F8VNOfficial

9 ай бұрын

Có thể ở file index.js của em đang chưa comment StrictMode lại phải ko?

@hieunguyen76134

9 ай бұрын

em có comment rồi nhưng vẫn bị ạ

Anh Sơn chưa ra video :))))

Có ai thắc mắc tại sao useState chỉ có 2 đối số mà lại dùng mảng chứ không dùng object không?

@HungNguyen-su6tl

2 жыл бұрын

Dùng object sao được hả bạn, destructuring của object bạn phải biết tên của properties chứ.

@codtalk

2 жыл бұрын

do useState() return về mảng thì dùng mảng

function App() { console.log("react-app") return ( ); } A Sơn cho e hỏi sao code của e bị re-render lại 2 lần thế nhỉ ở tab console nó hiện ra: react-app react-app như này ạ :((

@namhv967

Жыл бұрын

Mình cũng bị vậy, chưa biết sao luôn :(

@top_1_florentino

Жыл бұрын

@@namhv967 bạn bỏ React.Strictmode đi

hook chỉ dùng với function component

xem ngay mà vẫn ko kịp nhỉ