{"id":2482,"date":"2024-10-20T11:46:50","date_gmt":"2024-10-20T04:46:50","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=2482"},"modified":"2024-10-20T17:30:32","modified_gmt":"2024-10-20T10:30:32","slug":"react-hook-la-gi-6-hook-co-ban-trong-react","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/","title":{"rendered":"React Hook l\u00e0 g\u00ec? 6 Hook c\u01a1 b\u1ea3n trong React"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2482\" class=\"elementor elementor-2482\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6cf2f5f e-flex e-con-boxed e-con e-parent\" data-id=\"6cf2f5f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8f65d7 elementor-widget elementor-widget-heading\" data-id=\"d8f65d7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/#Gioi_thieu\" >Gi\u1edbi thi\u1ec7u<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/#1_useState\" >1. useState<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/#2_useEffect\" >2. useEffect<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/#3_useContext\" >3. useContext<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/#4_useRef\" >4. useRef<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/#5_useMemo\" >5. useMemo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/#6_useCallback\" >6. useCallback<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/#Ket_luan\" >K\u1ebft lu\u1eadn<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/#Click_de_xem_chi_tiet_hon\" >Click \u0111\u1ec3 xem chi ti\u1ebft h\u01a1n<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Gioi_thieu\"><\/span>Gi\u1edbi thi\u1ec7u <span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28dc8d4 elementor-widget elementor-widget-text-editor\" data-id=\"28dc8d4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Khi <a href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/\">React<\/a> ra m\u1eaft t\u00ednh n\u0103ng hook t\u1eeb phi\u00ean b\u1ea3n 16.8, n\u00f3 \u0111\u00e3 thay \u0111\u1ed5i c\u00e1ch ch\u00fang ta qu\u1ea3n l\u00fd state v\u00e0 x\u1eed l\u00fd logic trong c\u00e1c function component.<\/p><p>Trong b\u00e0i vi\u1ebft n\u00e0y, m\u00ecnh s\u1ebd gi\u1edbi thi\u1ec7u c\u00e1c hook c\u01a1 b\u1ea3n trong React v\u00e0 h\u01b0\u1edbng d\u1eabn c\u00e1ch \u00e1p d\u1ee5ng ch\u00fang v\u00e0o c\u00e1c v\u00ed d\u1ee5 c\u1ee5 th\u1ec3.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4945e14 elementor-widget elementor-widget-heading\" data-id=\"4945e14\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"1_useState\"><\/span>1. useState<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc9c4bf elementor-widget elementor-widget-text-editor\" data-id=\"dc9c4bf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>useState<\/strong> cho ph\u00e9p b\u1ea1n th\u00eam state v\u00e0o function component. Thay v\u00ec ph\u1ea3i d\u00f9ng class \u0111\u1ec3 t\u1ea1o state, gi\u1edd \u0111\u00e2y b\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n ch\u1ec9 v\u1edbi m\u1ed9t d\u00f2ng.<\/p>\n<p><strong>C\u00e1ch ho\u1ea1t \u0111\u1ed9ng<\/strong>: <code>useState<\/code> tr\u1ea3 v\u1ec1 m\u1ed9t <a href=\"https:\/\/fstack.io.vn\/blog\/array-va-cach-lam-viec-voi-no-trong-javascript\/\">m\u1ea3ng<\/a> g\u1ed3m hai ph\u1ea7n t\u1eed: gi\u00e1 tr\u1ecb hi\u1ec7n t\u1ea1i c\u1ee7a state v\u00e0 h\u00e0m \u0111\u1ec3 c\u1eadp nh\u1eadt n\u00f3.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aa2b5c0 elementor-widget elementor-widget-code-highlight\" data-id=\"aa2b5c0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const [count, setCount] = useState(0);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0ddd4c elementor-widget elementor-widget-text-editor\" data-id=\"f0ddd4c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>V\u00ed d\u1ee5 th\u1ef1c ti\u1ec5n<\/strong>: T\u1ea1o b\u1ed9 \u0111\u1ebfm s\u1ed1 l\u1ea7n nh\u1ea5n n\u00fat.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5cfd20e elementor-widget elementor-widget-code-highlight\" data-id=\"5cfd20e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function Counter() {\n  const [count, setCount] = useState(0);\n  \n  return (\n    <div>\n      <p>B\u1ea1n \u0111\u00e3 nh\u1ea5n {count} l\u1ea7n<\/p>\n      <button onClick={() => setCount(count + 1)}>Nh\u1ea5n t\u00f4i<\/button>\n    <\/div>\n  );\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5595b05 elementor-widget elementor-widget-text-editor\" data-id=\"5595b05\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>M\u1ed7i l\u1ea7n nh\u1ea5n n\u00fat s\u1ebd c\u1eadp nh\u1eadt gi\u00e1 tr\u1ecb <code>count<\/code> v\u00e0 t\u1ef1 \u0111\u1ed9ng render l\u1ea1i <a href=\"https:\/\/fstack.io.vn\/blog\/du-an\/\">giao di\u1ec7n<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2803595 elementor-widget elementor-widget-heading\" data-id=\"2803595\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"2_useEffect\"><\/span>2. useEffect<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2b554a elementor-widget elementor-widget-text-editor\" data-id=\"e2b554a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>useEffect<\/strong> gi\u00fap x\u1eed l\u00ed c\u00e1c sideEffect nh\u01b0 c\u00e1c h\u00e0nh \u0111\u1ed9ng nh\u01b0 g\u1ecdi API, \u0111\u0103ng k\u00fd s\u1ef1 ki\u1ec7n, ho\u1eb7c thao t\u00e1c v\u1edbi <a href=\"https:\/\/fstack.io.vn\/blog\/dom-la-gi-cach-thao-tac-voi-dom-trong-javascript\/\">DOM<\/a> khi component thay \u0111\u1ed5i ho\u1eb7c render l\u1ea7n \u0111\u1ea7u.<\/p><p><strong>C\u00e1ch s\u1eed d\u1ee5ng<\/strong>: <code>useEffect<\/code> nh\u1eadn v\u00e0o hai tham s\u1ed1, v\u1edbi tham s\u1ed1 th\u1ee9 hai l\u00e0 danh s\u00e1ch c\u00e1c bi\u1ebfn m\u00e0 khi ch\u00fang thay \u0111\u1ed5i, h\u00e0m <code>useEffect<\/code> s\u1ebd \u0111\u01b0\u1ee3c g\u1ecdi l\u1ea1i.<\/p><pre class=\"!overflow-visible\"><div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\"><div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\"><\/div><\/div><\/pre>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-173de2f elementor-widget elementor-widget-code-highlight\" data-id=\"173de2f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>useEffect(() => {\r\n  \/\/ Code ch\u1ea1y khi component render ho\u1eb7c dependencies thay \u0111\u1ed5i\r\n}, [dependencies]);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2a6126 elementor-widget elementor-widget-text-editor\" data-id=\"a2a6126\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>V\u00ed d\u1ee5<\/strong>: L\u1eafng nghe s\u1ef1 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1eeda s\u1ed5<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8592e5 elementor-widget elementor-widget-code-highlight\" data-id=\"a8592e5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function WindowSize() {\r\n  const [width, setWidth] = useState(window.innerWidth);\r\n  \r\n  useEffect(() => {\r\n    const handleResize = () => setWidth(window.innerWidth);\r\n    \r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n  \r\n  return <div>Chi\u1ec1u r\u1ed9ng c\u1eeda s\u1ed5 hi\u1ec7n t\u1ea1i: {width}px<\/div>;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2964bec elementor-widget elementor-widget-text-editor\" data-id=\"2964bec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>V\u1edbi v\u00ed d\u1ee5 n\u00e0y, m\u1ed7i khi k\u00edch th\u01b0\u1edbc c\u1eeda s\u1ed5 thay \u0111\u1ed5i, gi\u00e1 tr\u1ecb <code>width<\/code> s\u1ebd \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt v\u00e0 giao di\u1ec7n s\u1ebd t\u1ef1 \u0111\u1ed9ng render l\u1ea1i.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86bdb46 elementor-widget elementor-widget-heading\" data-id=\"86bdb46\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"3_useContext\"><\/span>3. useContext<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd0d855 elementor-widget elementor-widget-text-editor\" data-id=\"fd0d855\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>useContext<\/strong> gi\u00fap l\u1ea5y d\u1eef li\u1ec7u t\u1eeb Context API m\u00e0 kh\u00f4ng c\u1ea7n truy\u1ec1n qua t\u1eebng component trung gian.<\/p><p><strong>C\u00e1ch d\u00f9ng<\/strong>: Truy c\u1eadp d\u1eef li\u1ec7u context b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng hook <span style=\"font-family: monospace, monospace;\">useContext.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9fd76ae elementor-widget elementor-widget-code-highlight\" data-id=\"9fd76ae\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const theme = useContext(ThemeContext);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6f4eda elementor-widget elementor-widget-text-editor\" data-id=\"d6f4eda\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>V\u00ed d\u1ee5<\/strong>: Hi\u1ec3n th\u1ecb theme d\u1ef1a tr\u00ean context.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-860b25d elementor-widget elementor-widget-code-highlight\" data-id=\"860b25d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function ThemedComponent() {\r\n  const theme = useContext(ThemeContext);\r\n  \r\n  return <div style={{ backgroundColor: theme.background }}>Hello, World!<\/div>;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dcd9cbc elementor-widget elementor-widget-heading\" data-id=\"dcd9cbc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"4_useRef\"><\/span>4. useRef<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ef490f elementor-widget elementor-widget-text-editor\" data-id=\"0ef490f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>useRef<\/strong> t\u1ea1o ra m\u1ed9t tham chi\u1ebfu c\u00f3 th\u1ec3 l\u01b0u gi\u1eef gi\u00e1 tr\u1ecb qua c\u00e1c l\u1ea7n render m\u00e0 kh\u00f4ng l\u00e0m thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i c\u1ee7a component.<\/p><p><strong>C\u00e1ch s\u1eed d\u1ee5ng<\/strong>: Th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 thao t\u00e1c v\u1edbi DOM ho\u1eb7c l\u01b0u tr\u1eef th\u00f4ng tin kh\u00f4ng c\u1ea7n render l\u1ea1i<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a327b02 elementor-widget elementor-widget-code-highlight\" data-id=\"a327b02\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const inputRef = useRef(null);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f507bd3 elementor-widget elementor-widget-text-editor\" data-id=\"f507bd3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>V\u00ed d\u1ee5<\/strong>: T\u1ef1 \u0111\u1ed9ng focus v\u00e0o \u00f4 input khi component \u0111\u01b0\u1ee3c render.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4500cfd elementor-widget elementor-widget-code-highlight\" data-id=\"4500cfd\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function FocusInput() {\r\n  const inputRef = useRef(null);\r\n  \r\n  useEffect(() => {\r\n    inputRef.current.focus();\r\n  }, []);\r\n  \r\n  return <input ref={inputRef} \/>;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0acb753 elementor-widget elementor-widget-heading\" data-id=\"0acb753\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"5_useMemo\"><\/span>5. useMemo<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-953b24b elementor-widget elementor-widget-text-editor\" data-id=\"953b24b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>useMemo<\/strong> gi\u00fap t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t b\u1eb1ng c\u00e1ch ghi nh\u1edb k\u1ebft qu\u1ea3 c\u1ee7a m\u1ed9t h\u00e0m t\u00ednh to\u00e1n t\u1ed1n k\u00e9m, ch\u1ec9 t\u00ednh to\u00e1n l\u1ea1i khi gi\u00e1 tr\u1ecb ph\u1ee5 thu\u1ed9c thay \u0111\u1ed5i.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bd1ff2 elementor-widget elementor-widget-code-highlight\" data-id=\"0bd1ff2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2354c14 elementor-widget elementor-widget-text-editor\" data-id=\"2354c14\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>V\u00ed d\u1ee5<\/strong>: Ghi nh\u1edb k\u1ebft qu\u1ea3 c\u1ee7a m\u1ed9t ph\u00e9p t\u00ednh n\u1eb7ng.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1268b4 elementor-widget elementor-widget-code-highlight\" data-id=\"d1268b4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const expensiveResult = useMemo(() => {\r\n  return someHeavyCalculation(data);\r\n}, [data]);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e1c36f0 elementor-widget elementor-widget-heading\" data-id=\"e1c36f0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"6_useCallback\"><\/span>6. useCallback<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0e47a8 elementor-widget elementor-widget-text-editor\" data-id=\"d0e47a8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>useCallback<\/strong> ho\u1ea1t \u0111\u1ed9ng t\u01b0\u01a1ng t\u1ef1 nh\u01b0 <code>useMemo<\/code>, nh\u01b0ng d\u00e0nh cho h\u00e0m. N\u00f3 ghi nh\u1edb h\u00e0m v\u00e0 ch\u1ec9 t\u1ea1o l\u1ea1i khi dependencies thay \u0111\u1ed5i.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf2325b elementor-widget elementor-widget-code-highlight\" data-id=\"cf2325b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const memoizedFunction = useCallback(() => {\r\n  performAction(a, b);\r\n}, [a, b]);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccdef40 elementor-widget elementor-widget-text-editor\" data-id=\"ccdef40\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>V\u00ed d\u1ee5<\/strong>: Gi\u1ea3m thi\u1ec3u render kh\u00f4ng c\u1ea7n thi\u1ebft c\u1ee7a c\u00e1c component con.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc905a9 elementor-widget elementor-widget-code-highlight\" data-id=\"cc905a9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const handleClick = useCallback(() => {\r\n  console.log(\"Button clicked\");\r\n}, []);\r\n\r\nreturn <Button onClick={handleClick}>Nh\u1ea5n t\u00f4i<\/Button>;\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d01460f elementor-widget elementor-widget-heading\" data-id=\"d01460f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Ket_luan\"><\/span>K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d567dc5 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"d567dc5\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Hi\u1ec3u v\u00e0 s\u1eed d\u1ee5ng t\u1ed1t c\u00e1c hook c\u01a1 b\u1ea3n trong React s\u1ebd gi\u00fap b\u1ea1n t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t v\u00e0 qu\u1ea3n l\u00fd state hi\u1ec7u qu\u1ea3 h\u01a1n.<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">H\u00e3y th\u1eed \u00e1p d\u1ee5ng c\u00e1c v\u00ed d\u1ee5 v\u00e0o d\u1ef1 \u00e1n th\u1ef1c t\u1ebf \u0111\u1ec3 c\u1ea3m nh\u1eadn \u0111\u01b0\u1ee3c s\u1ef1 ti\u1ec7n l\u1ee3i c\u1ee7a c\u00e1c hook n\u00e0y.<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fc3d4a elementor-widget elementor-widget-heading\" data-id=\"2fc3d4a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Click_de_xem_chi_tiet_hon\"><\/span><a href=\"https:\/\/react.dev\/reference\/react\/hooks\" rel=\"nofollow noopener\" target=\"_blank\">Click \u0111\u1ec3 xem chi ti\u1ebft h\u01a1n <\/a><span class=\"ez-toc-section-end\"><\/span><\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f75b63 elementor-widget elementor-widget-text-editor\" data-id=\"3f75b63\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var(--postx_preset_Body_and_Others_typo_font_weight); text-decoration-line: ; text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); background-color: var(--postx_preset_Base_1_color); text-align: start; color: rgb(27, 27, 27); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 18px; letter-spacing: -0.054px;\">\u1ede tr\u00ean l\u00e0 1 s\u1ed1 chia s\u1ebb v\u1ec1 react hook c\u1ee7a m\u00ecnh, v\u00ec \u0111\u00e2y \u0111a ph\u1ea7n l\u00e0 ki\u1ebfn th\u1ee9c m\u00ecnh t\u1ef1 h\u1ecdc n\u00ean c\u00f3 th\u1ec3 b\u00e0i vi\u1ebft n\u00e0y c\u00f3 th\u1ec3 c\u00f3 nhi\u1ec1u ch\u1ed7 ch\u01b0a ch\u00ednh x\u00e1c v\u00e0 thi\u1ebfu s\u00f3t, mong m\u1ecdi ng\u01b0\u1eddi g\u00f3p \u00fd \u1edf d\u01b0\u1edbi ph\u1ea7n b\u00ecnh lu\u1eadn \u0111\u1ec3 b\u00e0i vi\u1ebft th\u00eam ho\u00e0n ch\u1ec9nh v\u00e0 x\u00e2y d\u1ef1ng m\u1ed9t c\u1ed9ng \u0111\u1ed3ng n\u01a1i m\u1ecdi ng\u01b0\u1eddi c\u00f3 th\u1ec3 chia s\u1ebb kinh nghi\u1ec7m <a href=\"https:\/\/fstack.io.vn\/blog\/lap-trinh-la-gi-mot-so-dac-diem-cua-lap-trinh-ma-ban-nen-biet\/\">l\u1eadp tr\u00ecnh<\/a> cho nhau&nbsp;<\/span><span style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-size: var(--postx_preset_body_typo_font_size_lg, initial); font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var( --e-global-typography-text-font-weight ); letter-spacing: var(--postx_preset_Body_and_Others_typo_letter_spacing_lg, normal); text-decoration-line: ; text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); text-align: var(--text-align); white-space-collapse: preserve; color: var( --e-global-color-text ); background-color: var(--postx_preset_Base_1_color);\">\ud83d\ude18<\/span><span style=\"font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var(--postx_preset_Body_and_Others_typo_font_weight); text-decoration-line: ; text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); text-align: var(--text-align); color: rgb(27, 27, 27); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 18px; letter-spacing: -0.054px; background-color: var(--postx_preset_Base_1_color);\">.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gi\u1edbi thi\u1ec7u Khi React ra m\u1eaft t\u00ednh n\u0103ng hook t\u1eeb phi\u00ean b\u1ea3n 16.8, n\u00f3 \u0111\u00e3 thay \u0111\u1ed5i c\u00e1ch ch\u00fang ta qu\u1ea3n l\u00fd state v\u00e0 x\u1eed l\u00fd logic trong c\u00e1c function component. Trong b\u00e0i vi\u1ebft n\u00e0y, m\u00ecnh s\u1ebd gi\u1edbi thi\u1ec7u c\u00e1c hook c\u01a1 b\u1ea3n trong React v\u00e0 h\u01b0\u1edbng d\u1eabn c\u00e1ch \u00e1p d\u1ee5ng ch\u00fang v\u00e0o c\u00e1c v\u00ed [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":2483,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43,1],"tags":[28],"class_list":["post-2482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-cong-nghe","category-cong-nghe","tag-react"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/10\/react-hook-huongdan.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=2482"}],"version-history":[{"count":28,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2482\/revisions"}],"predecessor-version":[{"id":2519,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2482\/revisions\/2519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/2483"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=2482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=2482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=2482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}