{"id":761,"date":"2021-05-03T10:09:39","date_gmt":"2021-05-03T10:09:39","guid":{"rendered":"https:\/\/egany.com\/blogs\/?p=761"},"modified":"2022-03-13T02:47:34","modified_gmt":"2022-03-13T02:47:34","slug":"2-ki-thuat-don-gian-de-optimize-react-render","status":"publish","type":"post","link":"https:\/\/egany.com\/blogs\/2-ki-thuat-don-gian-de-optimize-react-render\/","title":{"rendered":"2 k\u0129 thu\u1eadt \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 optimize React render"},"content":{"rendered":"<p>L\u1ec5 \u0111\u01b0\u1ee3c ngh\u1ec9 d\u00e0i ng\u00e0y nh\u01b0ng l\u1ea1i tr\u00fang m\u00f9a d\u1ecbch COVID-19, c\u0169ng kh\u00f4ng \u0111\u01b0\u1ee3c \u0111i \u0111\u00e2u ch\u01a1i n\u00ean th\u00f4i \u1edf nh\u00e0 vi\u1ebft blog cho c\u00e1c b\u1ea1n. B\u00e0i vi\u1ebft h\u00f4m nay s\u1ebd chia s\u1ebb cho c\u00e1c b\u1ea1n <strong>2 k\u0129 thu\u1eadt \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 optimize React render<\/strong>.<\/p>\n<h2>Gi\u1edbi thi\u1ec7u<\/h2>\n<p>Ch\u1eafc h\u1eb3n m\u1ed9t s\u1ed1 b\u1ea1n \u0111\u00e3 t\u1eebng g\u1eb7p nh\u1eefng khung search &quot;gi\u1eadt lag&quot; ho\u1eb7c c\u00e1c input text khi g\u00f5 ch\u1eef r\u1ed3i nh\u01b0ng v\u00e0i gi\u00e2y sau m\u1edbi hi\u1ec7n tr\u00ean giao di\u1ec7n. \u0110\u00f3 l\u00e0 v\u1ea5n \u0111\u1ec1 m\u00e0 ch\u00fang ta s\u1ebd kh\u1eafc ph\u1ee5c ng\u00e0y h\u00f4m nay. Optimize React render c\u00f3 th\u1ec3 hi\u1ec3u l\u00e0 vi\u1ec7c lo\u1ea1i b\u1ecf c\u00e1c l\u01b0\u1ee3t render th\u1eeba, gi\u00fap t\u0103ng t\u1ed1c \u0111\u1ed9 c\u1ee7a \u1ee9ng d\u1ee5ng c\u0169ng nh\u01b0 gia t\u0103ng tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/p>\n<p>C\u00e1c &quot;component&quot; th\u01b0\u1eddng \u0111\u01b0\u1ee3c optimize l\u00e0 <code>form<\/code> (t\u1ea5t nhi\u00ean l\u00e0 t\u00ednh lu\u00f4n c\u1ea3 input b\u00ean trong) v\u00e0 table, \u0111\u1eb7c bi\u1ec7t l\u00e0 <code>datatable<\/code> v\u1edbi d\u1eef li\u1ec7u tr\u00edch xu\u1ea5t t\u1eeb API.<\/p>\n<p><strong>L\u01b0u \u00fd:<\/strong> Ch\u1ec9 optimize khi \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n c\u00f3 d\u1ea5u hi\u1ec7u ch\u1eadm. L\u1ea1m d\u1ee5ng optimize qu\u00e1 nhi\u1ec1u \u0111\u00f4i khi s\u1ebd ph\u1ea3n t\u00e1c d\u1ee5ng v\u00e0 l\u00e0m \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n ch\u1eadm h\u01a1n so v\u1edbi l\u00fac ch\u01b0a optimize c\u0169ng nh\u01b0 ph\u00e1t sinh m\u1ed9t s\u1ed1 l\u1ed7i \u0111i k\u00e8m (do s\u01a1 xu\u1ea5t trong qu\u00e1 tr\u00ecnh th\u1ef1c hi\u1ec7n), r\u1ea5t kh\u00f3 \u0111\u1ec3 debug.<\/p>\n<h2>Chu\u1ea9n b\u1ecb<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/demo.png\" alt=\"optimize react demo\" width=\"576\" height=\"388\" class=\"aligncenter size-full wp-image-762\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/demo.png 576w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/demo-300x202.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/demo-100x67.png 100w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><\/p>\n<p>C\u00e0i \u0111\u1eb7t extension <em>React Developer Tools<\/em> (<a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/react-devtools\/\" rel=\"nofollow noopener\" target=\"_blank\">Firefox<\/a> | <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/react-developer-tools\/fmkadmapgofadopljbjfkapdkoienihi?hl=en\" rel=\"nofollow noopener\" target=\"_blank\">Google Chrome<\/a>) \u0111\u1ec3 ki\u1ec3m tra v\u00e0 h\u1ed7 tr\u1ee3 qu\u00e1 tr\u00ecnh optimize.<\/p>\n<p>C\u00e1c k\u0129 thu\u1eadt bao g\u1ed3m:<\/p>\n<ul>\n<li>X\u00e0i g\u00ec truy\u1ec1n n\u1ea5y (ph\u00e2n t\u00e1ch component)<\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/react-api.html#reactmemo\" rel=\"nofollow noopener\" target=\"_blank\"><code>React.memo<\/code><\/a><\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecallback\" rel=\"nofollow noopener\" target=\"_blank\"><code>React.useCallback<\/code><\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/github.com\/EGANY-Team\/optimize-react-render\/\" rel=\"nofollow noopener\" target=\"_blank\">Github repo<\/a> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong b\u00e0i vi\u1ebft.<\/p>\n<ul>\n<li>Nh\u00e1nh <code>main<\/code>: code ch\u01b0a optimize<\/li>\n<li>Nh\u00e1nh <code>optimized<\/code>: nh\u01b0 t\u00ean nh\u00e1nh<\/li>\n<\/ul>\n<p>Repo ch\u1ee7 y\u1ebfu nh\u1eb1m m\u1ee5c \u0111\u00edch demo n\u00ean t\u1ed5 ch\u1ee9c kh\u00e1 \u0111\u01a1n gi\u1ea3n:<\/p>\n<ul>\n<li><code>components\/index.js<\/code>: khai b\u00e1o c\u00e1c component s\u1ebd s\u1eed d\u1ee5ng trong trang, ch\u1ee7 y\u1ebfu l\u00e0 form input \u0111\u01b0\u1ee3c styled b\u1eb1ng <a href=\"https:\/\/tachyons.io\/\" rel=\"nofollow noopener\" target=\"_blank\"><em>Tachyons CSS<\/em><\/a><\/li>\n<li><code>pages\/index.js<\/code>: trang ch\u00ednh, s\u1eed d\u1ee5ng c\u00e1c components \u0111\u00e3 build \u0111\u1ec3 d\u1ee5ng m\u1ed9t form \u0111\u01a1n gi\u1ea3n bao g\u1ed3m <code>name<\/code>, <code>email<\/code> v\u00e0 <code>button<\/code> \u0111\u1ec3 submit form<\/li>\n<\/ul>\n<h3>1. X\u00e0i g\u00ec truy\u1ec1n n\u1ea5y<\/h3>\n<p>H\u1ea1n ch\u1ebf vi\u1ec7c truy\u1ec1n d\u01b0 <code>props<\/code> cho component.<\/p>\n<p>M\u00ecnh g\u1eb7p r\u1ea5t nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p (t\u1ea5t nhi\u00ean l\u00e0 c\u00f3 m\u00ecnh c\u1ee7a &quot;ng\u00e0y h\u00f4m qua&quot;) truy\u1ec1n d\u01b0 props cho component, \u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c <code>wrapper<\/code> component. V\u00ed d\u1ee5<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-700x326.png\" alt=\"\" width=\"700\" height=\"326\" class=\"aligncenter size-epcl_single_content wp-image-782\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-700x326.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-300x140.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-1024x477.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-768x358.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-1536x715.png 1536w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-2048x954.png 2048w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-100x47.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-1600x745.png 1600w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Nh\u01b0 c\u00e1c b\u1ea1n th\u1ea5y th\u00ec component <code>Dashboard<\/code> ch\u1ec9 s\u1eed d\u1ee5ng <code>isMobile<\/code>. N\u00f3 ch\u1ee7 y\u1ebfu l\u00e0 trung gian \u0111\u1ec3 truy\u1ec1n <code>props<\/code> t\u1edbi c\u00e1c component con, c\u1ee5 th\u1ec3 l\u00e0 <code>SearchInput<\/code> v\u00e0 <code>Datatable<\/code>.<\/p>\n<p>\u0110\u1ec3 gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 n\u00e0y, ch\u00fang ta c\u00f3 th\u1ec3 vi\u1ebft l\u1ea1i nh\u01b0 sau:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-after-700x383.png\" alt=\"\" width=\"700\" height=\"383\" class=\"aligncenter size-epcl_single_content wp-image-781\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-after-700x383.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-after-300x164.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-after-1024x560.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-after-768x420.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-after-1536x841.png 1536w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-after-2048x1121.png 2048w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-after-100x55.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/component-after-1600x876.png 1600w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<blockquote>\n<p>B\u00ean tr\u00ean ch\u1ec9 l\u00e0 code v\u00ed d\u1ee5 \u0111\u1ec3 c\u00e1c b\u1ea1n d\u1ec5 h\u00ecnh dung, kh\u00f4ng c\u00f3 trong repo \u0111\u00e2u nh\u00e9 \ud83d\ude42<\/p>\n<\/blockquote>\n<p>Tuy kh\u00f4ng tr\u1ef1c ti\u1ebfp gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 render th\u1eeba nh\u01b0ng m\u00ecnh ngh\u0129 \u0111\u00e2y l\u00e0 m\u1ed9t th\u00f3i quen t\u1ed1t m\u00e0 c\u00e1c b\u1ea1n n\u00ean \u00e1p d\u1ee5ng. T\u1ea5t nhi\u00ean m\u1ecdi th\u1ee9 lu\u00f4n c\u00f3 2 m\u1eb7t c\u1ee7a n\u00f3, n\u1ebfu c\u00e1c b\u1ea1n mu\u1ed1n t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n th\u00ec c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng t\u1eeb kh\u00f3a <code>props drilling in react<\/code> \u0111\u1ec3 \u0111\u1ecdc th\u00eam nh\u00e9.<\/p>\n<h3>2. Profiling v\u1edbi React Developer Tools<\/h3>\n<blockquote>\n<p>C\u00e1c b\u01b0\u1edbc h\u01b0\u1edbng d\u1eabn b\u00ean d\u01b0\u1edbi ch\u1ec9 \u00e1p d\u1ee5ng cho repo m\u1eabu c\u1ee7a m\u00ecnh. C\u00e1c b\u1ea1n t\u1ef1 \u0111i\u1ec1u ch\u1ec9nh l\u1ea1i theo repo c\u1ee7a c\u00e1c b\u1ea1n nh\u00e9.<\/p>\n<\/blockquote>\n<p>Start \u1ee9ng d\u1ee5ng \u1edf <code>development<\/code> mode v\u1edbi l\u1ec7nh <code>yarn dev<\/code>. Truy c\u1eadp v\u00e0o \u1ee9ng d\u1ee5ng t\u1ea1i <a href=\"http:\/\/localhost:3000\" rel=\"nofollow noopener\" target=\"_blank\">http:\/\/localhost:3000<\/a><\/p>\n<p>M\u1edf <code>Chrome DevTools<\/code> ho\u1eb7c <code>Firefox Developer Tools<\/code> (ph\u00edm t\u1eaft F12 ho\u1eb7c right-click v\u00e0o trang v\u00e0 ch\u1ecdn <em>Inspect<\/em>)<\/p>\n<p>Ch\u1ecdn <em>Profiler<\/em> nh\u01b0 h\u00ecnh:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/open-profiler.png\" alt=\"\" width=\"1855\" height=\"946\" class=\"aligncenter size-full wp-image-763\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/open-profiler.png 1855w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/open-profiler-300x153.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/open-profiler-1024x522.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/open-profiler-768x392.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/open-profiler-1536x783.png 1536w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/open-profiler-100x51.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/open-profiler-700x357.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/open-profiler-1600x816.png 1600w\" sizes=\"(max-width: 1855px) 100vw, 1855px\" \/><\/p>\n<p>Nh\u1ea5n v\u00e0o icon b\u00e1nh r\u0103ng (cog) v\u00e0 thi\u1ebft l\u1eadp nh\u01b0 trong h\u00ecnh:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/view-setting-700x149.png\" alt=\"\" width=\"700\" height=\"149\" class=\"aligncenter size-epcl_single_content wp-image-764\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/view-setting-700x149.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/view-setting-300x64.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/view-setting-1024x219.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/view-setting-768x164.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/view-setting-100x21.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/view-setting.png 1204w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/highlight-render-700x308.png\" alt=\"\" width=\"700\" height=\"308\" class=\"aligncenter size-epcl_single_content wp-image-765\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/highlight-render-700x308.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/highlight-render-300x132.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/highlight-render-100x44.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/highlight-render.png 725w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/why-render-700x203.png\" alt=\"\" width=\"700\" height=\"203\" class=\"aligncenter size-epcl_single_content wp-image-766\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/why-render-700x203.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/why-render-300x87.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/why-render-100x29.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/why-render.png 722w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Sau khi thi\u1ebft l\u1eadp, c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 click v\u00e0o icon tr\u00f2n m\u00e0u xanh d\u01b0\u01a1ng \u0111\u1ec3 b\u1eaft \u0111\u1ea7u profile.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/start-profile.png\" alt=\"\" width=\"372\" height=\"184\" class=\"aligncenter size-full wp-image-767\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/start-profile.png 372w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/start-profile-300x148.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/start-profile-100x49.png 100w\" sizes=\"(max-width: 372px) 100vw, 372px\" \/><\/p>\n<p>\u0110\u1ec3 profile hi\u1ec7u qu\u1ea3, b\u1ea1n <strong>ch\u1ec9 n\u00ean nh\u1eadp m\u1ed9t input b\u1ea1n nghi ng\u1edd<\/strong> l\u00e0 l\u00fd do l\u00e0m cho \u1ee9ng d\u1ee5ng b\u1ecb ch\u1eadm. \u1ede \u0111\u00e2y m\u00ecnh ch\u1ecdn input <code>name<\/code> (H\u1ecd v\u00e0 t\u00ean). Sau khi nh\u1eadp xong, nh\u1ea5n v\u00e0o icon tr\u00f2n m\u00e0u \u0111\u1ecf \u0111\u1ec3 d\u1eebng profile.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/stop-profile-670x450.png\" alt=\"\" width=\"670\" height=\"450\" class=\"aligncenter size-epcl_single_content wp-image-768\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/stop-profile-670x450.png 670w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/stop-profile-300x202.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/stop-profile-1024x688.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/stop-profile-768x516.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/stop-profile-100x67.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/stop-profile.png 1033w\" sizes=\"(max-width: 670px) 100vw, 670px\" \/><\/p>\n<p>K\u1ebft qu\u1ea3 s\u1ebd l\u00e0 m\u1ed9t bi\u1ec3u \u0111\u1ed3 (chart) nh\u01b0 h\u00ecnh, g\u1ecdi l\u00e0 <em>Flamegraph chart<\/em>. \u0110\u00e2y l\u00e0 bi\u1ec3u \u0111\u1ed3 th\u1ec3 hi\u1ec7n th\u1eddi gian render c\u1ee7a c\u00e1c component. M\u00e0u c\u00e0ng nh\u1ea1t \u0111\u1ed3ng ngh\u0129a v\u1edbi vi\u1ec7c component render c\u00e0ng \u00edt (m\u00e0u x\u00e1m l\u00e0 kh\u00f4ng render, m\u00e0u \u0111\u1ecf l\u00e0 render l\u00e2u nh\u1ea5t).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/unoptimized-profile-685x450.png\" alt=\"\" width=\"685\" height=\"450\" class=\"aligncenter size-epcl_single_content wp-image-769\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/unoptimized-profile-685x450.png 685w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/unoptimized-profile-300x197.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/unoptimized-profile-768x505.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/unoptimized-profile-100x66.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/unoptimized-profile.png 796w\" sizes=\"(max-width: 685px) 100vw, 685px\" \/><\/p>\n<p>B\u1ea1n c\u00f3 th\u1ec3 chuy\u1ec3n qua <em>Ranked chart<\/em> \u0111\u1ec3 xem chi ti\u1ebft th\u1ee9 h\u1ea1ng render (s\u1eafp x\u1ebfp t\u1eeb l\u00e2u nh\u1ea5t t\u1edbi nhanh nh\u1ea5t t\u1eeb tr\u00ean xu\u1ed1ng) c\u0169ng nh\u01b0 chi ti\u1ebft v\u00ec sao component render b\u1eb1ng c\u00e1ch hover l\u00ean component mu\u1ed1n xem.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/styled-input-profile-700x330.png\" alt=\"\" width=\"700\" height=\"330\" class=\"aligncenter size-epcl_single_content wp-image-770\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/styled-input-profile-700x330.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/styled-input-profile-300x141.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/styled-input-profile-1024x482.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/styled-input-profile-768x362.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/styled-input-profile-100x47.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/styled-input-profile.png 1454w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/button-profile-700x262.png\" alt=\"\" width=\"700\" height=\"262\" class=\"aligncenter size-epcl_single_content wp-image-773\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/button-profile-700x262.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/button-profile-300x112.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/button-profile-1024x383.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/button-profile-768x287.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/button-profile-100x37.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/button-profile.png 1165w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Nh\u01b0 c\u00e1c b\u1ea1n th\u1ea5y, tuy m\u00ecnh ch\u1ec9 \u0111\u1ed5i duy nh\u1ea5t <code>name<\/code> (H\u1ecd v\u00e0 t\u00ean) nh\u01b0ng <code>email<\/code> v\u00e0 c\u00e1c component kh\u00e1c c\u0169ng render theo.<\/p>\n<p>Trong demo th\u00ec vi\u1ec7c n\u00e0y l\u00e0 ch\u1ea5p nh\u1eadn \u0111\u01b0\u1ee3c v\u00ec ch\u1ee7 y\u1ebfu c\u00e1c component \u0111\u1ec1u ph\u1ee5c v\u1ee5 m\u1ee5c \u0111\u00edch styling, kh\u00f4ng x\u1eed l\u00fd logic qu\u00e1 nhi\u1ec1u. Th\u1ebf nh\u01b0ng trong th\u1ef1c t\u1ebf s\u1ebd xu\u1ea5t hi\u1ec7n m\u1ed9t s\u1ed1 component x\u1eed l\u00fd r\u1ea5t nhi\u1ec1u logic, th\u1eadm ch\u00ed l\u00e0 c\u00f3 g\u1ecdi API ph\u00eda b\u00ean trong n\u00ean vi\u1ec7c render d\u01b0 th\u1eeba s\u1ebd \u1ea3nh h\u01b0\u1edfng \u00edt nhi\u1ec1u t\u1edbi performance c\u1ee7a trang.<\/p>\n<p>Khi \u0111\u00e3 x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c nguy\u00ean nh\u00e2n render c\u1ee7a component, m\u00ecnh s\u1ebd b\u1eaft \u0111\u1ea7u optimize.<\/p>\n<h2>Optimize<\/h2>\n<h3>1. React.memo<\/h3>\n<blockquote>\n<p>N\u1ebfu s\u1eed d\u1ee5ng <em>Class Component<\/em>, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <code>Pure Component<\/code> \u0111\u1ec3 thay th\u1ebf cho <code>React.memo<\/code><\/p>\n<\/blockquote>\n<p><code>React.memo<\/code> l\u00e0 <a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\" rel=\"nofollow noopener\" target=\"_blank\">higher-order component (HOC)<\/a> ph\u1ee5c v\u1ee5 cho m\u1ee5c \u0111\u00edch optimize performance. <code>React.memo<\/code> s\u1ebd &quot;nh\u1edb&quot; l\u1ea7n render cu\u1ed1i c\u1ee7a component v\u00e0 <code>props<\/code> t\u1ea1i th\u1eddi \u0111i\u1ec3m \u0111\u00f3. Ch\u1ec9 khi <code>props<\/code> thay \u0111\u1ed5i th\u00ec <code>React.memo<\/code> m\u1edbi th\u1ef1c hi\u1ec7n render l\u1ea1i component.<\/p>\n<p>M\u00ecnh s\u1ebd \u00e1p d\u1ee5ng n\u00f3 \u0111\u1ec3 optimize <code>Heading<\/code>, <code>StyledInput<\/code>, <code>StyledLabel<\/code> v\u00e0 <code>StyledButton<\/code>. M\u00ecnh kh\u00f4ng \u00e1p d\u1ee5ng cho <code>Wrapper<\/code> hay <code>StyledForm<\/code> v\u00ec ch\u00fang l\u00e0 &quot;wrapper&quot; component, khi <code>children<\/code> thay \u0111\u1ed5i th\u00ec ch\u00fang s\u1ebd render l\u1ea1i, m\u00e0 t\u1ea7n su\u1ea5t thay \u0111\u1ed5i c\u1ee7a c\u00e1c component b\u00ean trong kh\u00e1 l\u00e0 cao n\u00ean c\u00f3 &quot;nh\u1edb&quot; th\u00ec c\u0169ng kh\u00f4ng c\u00f3 t\u00e1c d\u1ee5ng g\u00ec.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-memo-1024x975.png\" alt=\"\" width=\"719\" height=\"685\" class=\"aligncenter size-large wp-image-780\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-memo-1024x975.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-memo-300x286.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-memo-768x731.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-memo-1536x1462.png 1536w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-memo-2048x1950.png 2048w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-memo-100x95.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-memo-473x450.png 473w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-memo-1260x1200.png 1260w\" sizes=\"(max-width: 719px) 100vw, 719px\" \/><\/p>\n<p>Ti\u1ebfn h\u00e0nh profile l\u1ea1i sau khi optimize b\u1eb1ng <code>React.memo<\/code>, m\u00ecnh nh\u1eadn th\u1ea5y <code>Heading<\/code>, <code>StyledLabel<\/code> c\u0169ng nh\u01b0 <code>StyledButton<\/code> kh\u00f4ng c\u00f2n render n\u1eefa. T\u1ed1t h\u01a1n r\u1ea5t nhi\u1ec1u r\u1ed3i ph\u1ea3i kh\u00f4ng n\u00e0o? Tuy nhi\u00ean, <code>email<\/code> input v\u1eabn render v\u00ec props <code>onChange<\/code> thay \u0111\u1ed5i.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/after-memo-profile-700x337.png\" alt=\"\" width=\"700\" height=\"337\" class=\"aligncenter size-epcl_single_content wp-image-771\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/after-memo-profile-700x337.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/after-memo-profile-300x144.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/after-memo-profile-1024x493.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/after-memo-profile-768x370.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/after-memo-profile-100x48.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/after-memo-profile.png 1433w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>T\u1ea1i sao <code>onChange<\/code> l\u1ea1i thay \u0111\u1ed5i?<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/handle-email-change-700x397.png\" alt=\"\" width=\"700\" height=\"397\" class=\"aligncenter size-epcl_single_content wp-image-779\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/handle-email-change-700x397.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/handle-email-change-300x170.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/handle-email-change-1024x581.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/handle-email-change-768x435.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/handle-email-change-1536x871.png 1536w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/handle-email-change-2048x1161.png 2048w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/handle-email-change-100x57.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/handle-email-change-1600x907.png 1600w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>V\u1edbi \u0111o\u1ea1n code nh\u01b0 tr\u00ean, m\u1ed7i l\u1ea7n <code>Home<\/code> render l\u1ea1i, m\u1ed9t function <code>handleEmailChange<\/code> (props <code>onChange<\/code>) l\u1ea1i \u0111\u01b0\u1ee3c t\u1ea1o ra khi\u1ebfn cho <code>StyledInput<\/code> c\u1ee7a <code>email<\/code> b\u1ecb thay \u0111\u1ed5i. Ch\u00fang ta c\u00f3 th\u1ec3 optimize v\u1ea5n \u0111\u1ec1 n\u00e0y b\u1eb1ng k\u0129 thu\u1eadt ti\u1ebfp theo: <code>React.useCallback<\/code><\/p>\n<h3>2. React.useCallback<\/h3>\n<p>C\u0169ng gi\u1ed1ng nh\u01b0 c\u00e1ch <code>React.memo<\/code> ho\u1ea1t \u0111\u1ed9ng, <code>React.useCallback<\/code> s\u1ebd &quot;nh\u1edb&quot; function thay v\u00ec l\u1ea7n cu\u1ed1i render. N\u1ebfu <code>React.memo<\/code> thay \u0111\u1ed5i d\u1ef1a tr\u00ean <code>props<\/code> th\u00ec <code>React.useCallback<\/code> s\u1ebd thay \u0111\u1ed5i d\u1ef1a tr\u00ean danh s\u00e1ch <em>dependencies<\/em> \u0111\u01b0\u1ee3c khai b\u00e1o.<\/p>\n<p><code>handleEmailChange<\/code> s\u1ebd \u0111\u01b0\u1ee3c vi\u1ebft l\u1ea1i nh\u01b0 sau:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-use-callback-700x354.png\" alt=\"\" width=\"700\" height=\"354\" class=\"aligncenter size-epcl_single_content wp-image-778\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-use-callback-700x354.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-use-callback-300x152.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-use-callback-1024x518.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-use-callback-768x389.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-use-callback-1536x777.png 1536w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-use-callback-2048x1036.png 2048w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-use-callback-100x51.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimize-react-use-callback-1600x810.png 1600w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Do kh\u00f4ng ph\u1ee5 thu\u1ed9c v\u00e0o b\u1ea5t k\u1ef3 bi\u1ebfn n\u00e0o (t\u1eeb props ho\u1eb7c c\u00e1c th\u01b0 vi\u1ec7n b\u00ean ngo\u00e0i, vd: <code>router<\/code>) n\u00ean <em>dependencies<\/em> c\u1ee7a m\u00ecnh s\u1ebd l\u00e0 danh s\u00e1ch r\u1ed7ng <code>[]<\/code>. <code>setEmail<\/code> do l\u00e0 state n\u00ean s\u1ebd kh\u00f4ng \u0111\u1ed5i, c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 khai b\u00e1o ho\u1eb7c kh\u00f4ng \u0111\u1ec1u \u0111\u01b0\u1ee3c. S\u1eb5n ti\u1ec7n th\u00ec m\u00ecnh \u00e1p d\u1ee5ng lu\u00f4n cho <code>handleNameChange<\/code> nh\u00e9.<\/p>\n<p>K\u1ebft qu\u1ea3 profile sau khi \u00e1p d\u1ee5ng <code>React.useCallback<\/code>:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimized-700x337.png\" alt=\"\" width=\"700\" height=\"337\" class=\"aligncenter size-epcl_single_content wp-image-772\" srcset=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimized-700x337.png 700w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimized-300x144.png 300w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimized-1024x493.png 1024w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimized-768x370.png 768w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimized-100x48.png 100w, https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/05\/optimized.png 1427w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>L\u1eddi k\u1ebft<\/h2>\n<p>Ch\u1ec9 v\u1edbi v\u00e0i thao t\u00e1c \u0111\u01a1n gi\u1ea3n, c\u00e1c b\u1ea1n \u0111\u00e3 lo\u1ea1i b\u1ecf \u0111\u01b0\u1ee3c kh\u00e1 nhi\u1ec1u l\u01b0\u1ee3t render th\u1eeba trong \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh. Ngo\u00e0i c\u00e1c k\u0129 thu\u1eadt \u0111\u01b0\u1ee3c chia s\u1ebb trong b\u00e0i vi\u1ebft, c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc th\u00eam v\u1ec1 <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecmemo\" rel=\"nofollow noopener\" target=\"_blank\"><code>React.useMemo<\/code><\/a> ho\u1eb7c <a href=\"https:\/\/programmingwithmosh.com\/javascript\/javascript-throttle-and-debounce-patterns\/\" rel=\"nofollow noopener\" target=\"_blank\"><code>debounce\/throttle<\/code><\/a> \u0111\u1ec3 optimize s\u00e2u h\u01a1n n\u1eefa nh\u00e9.<\/p>\n<p>Hi v\u1ecdng qua b\u00e0i vi\u1ebft c\u00e1c b\u1ea1n s\u1ebd t\u1ef1 optimize performance cho c\u00e1c \u1ee9ng d\u1ee5ng hi\u1ec7n t\u1ea1i c\u1ee7a m\u00ecnh. N\u1ebfu c\u00f3 b\u1ea5t k\u00ec th\u1eafc m\u1eafc ho\u1eb7c g\u00f3p \u00fd th\u00ec c\u1ee9 comment l\u1ea1i b\u00ean d\u01b0\u1edbi cho m\u00ecnh nh\u00e9. \u0110\u1eebng qu\u00ean gi\u1eef g\u00ecn s\u1ee9c kh\u1ecfe cho m\u00ecnh v\u00e0 ng\u01b0\u1eddi th\u00e2n nh\u00e9 trong l\u00fac t\u00ecnh h\u00ecnh d\u1ecbch \u0111ang di\u1ec5n bi\u1ebfn ph\u1ee9c t\u1ea1p.<\/p>\n<p>Happy hacking!<\/p>\n<blockquote>\n<p>M\u00ecnh c\u0169ng c\u00f3 vi\u1ebft chu\u1ed7i b\u00e0i <a href=\"https:\/\/egany.com\/blogs\/tag\/frontend-du-ky\/\" title=\"Frontend Du K\u00fd\">Frontend Du K\u00fd<\/a>, k\u1ec3 v\u1ec1 h\u00e0nh tr\u00ecnh ph\u00e1t tri\u1ec3n s\u1ea3n ph\u1ea9m c\u1ee7a team Frontend EGANY \u0111\u00e3 \u0111i qua. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 gh\u00e9 qua xem th\u1eed, m\u00ecnh tin n\u00f3 s\u1ebd gi\u00fap c\u00e1c b\u1ea1n b\u1edbt &quot;gi\u1eabm m\u00ecn&quot; h\u01a1n r\u1ea5t nhi\u1ec1u<\/p>\n<p>N\u1ebfu b\u1ea1n th\u1ea5y h\u00e0nh tr\u00ecnh b\u1ecdn m\u00ecnh th\u00fa v\u1ecb v\u00e0 mu\u1ed1n c\u00f9ng nhau vi\u1ebft ti\u1ebfp th\u00ec <a href=\"https:\/\/egany.com\/blogs\/front-end-engineer-reactjs-nextjs-typescript-svelte\/\" title=\"xem th\u00eam t\u1ea1i \u0111\u00e2y\">xem th\u00eam t\u1ea1i \u0111\u00e2y<\/a> nh\u00e9.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>L\u1ec5 \u0111\u01b0\u1ee3c ngh\u1ec9 d\u00e0i ng\u00e0y nh\u01b0ng l\u1ea1i tr\u00fang m\u00f9a d\u1ecbch COVID-19, c\u0169ng kh\u00f4ng \u0111\u01b0\u1ee3c \u0111i \u0111\u00e2u ch\u01a1i n\u00ean th\u00f4i \u1edf nh\u00e0 vi\u1ebft blog cho c\u00e1c b\u1ea1n. B\u00e0i vi\u1ebft h\u00f4m nay s\u1ebd chia s\u1ebb cho c\u00e1c b\u1ea1n 2 k\u0129 thu\u1eadt \u0111\u01a1n gi\u1ea3n \u0111\u1ec3 optimize React render. Gi\u1edbi thi\u1ec7u Ch\u1eafc h\u1eb3n m\u1ed9t s\u1ed1 b\u1ea1n \u0111\u00e3 t\u1eebng g\u1eb7p nh\u1eefng khung search &quot;gi\u1eadt lag&quot; ho\u1eb7c c\u00e1c input text khi g\u00f5 ch\u1eef r\u1ed3i nh\u01b0ng v\u00e0i gi\u00e2y sau m\u1edbi hi\u1ec7n tr\u00ean giao di\u1ec7n. \u0110\u00f3 l\u00e0 v\u1ea5n \u0111\u1ec1 m\u00e0 ch\u00fang ta s\u1ebd kh\u1eafc ph\u1ee5c ng\u00e0y h\u00f4m nay. Optimize React render c\u00f3 th\u1ec3 hi\u1ec3u l\u00e0 vi\u1ec7c lo\u1ea1i b\u1ecf<\/p>\n","protected":false},"author":2,"featured_media":777,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,54],"tags":[68,29,31,32,63,65,67,72,71,69,66,35,38,70],"_links":{"self":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/761"}],"collection":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/comments?post=761"}],"version-history":[{"count":0,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/761\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media\/777"}],"wp:attachment":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media?parent=761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/categories?post=761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/tags?post=761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}