{"id":6023,"date":"2026-03-31T10:52:31","date_gmt":"2026-03-31T05:22:31","guid":{"rendered":"https:\/\/codematrix.co.in\/blog\/?page_id=6023"},"modified":"2026-04-03T16:51:02","modified_gmt":"2026-04-03T11:21:02","slug":"useeffect-react","status":"publish","type":"page","link":"https:\/\/codematrix.co.in\/blog\/useeffect-react\/","title":{"rendered":"useEffect \u2013 React"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6023\" class=\"elementor elementor-6023\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c19d30 e-flex e-con-boxed e-con e-parent\" data-id=\"0c19d30\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be9d895 elementor-widget elementor-widget-html\" data-id=\"be9d895\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- Brand Styling --- *\/\r\n    :root {\r\n        --brand-purple: #9C00E4;\r\n        --brand-light: #f3e8ff;\r\n    }\r\n\r\n    \/* Reset & Base *\/\r\n    .python-full-layout * { box-sizing: border-box; }\r\n\r\n    \/* Layout Adjustments *\/\r\n    .python-full-layout { \r\n        display: flex; \r\n        gap: 30px; \r\n        padding: 20px; \r\n        max-width: 1200px; \r\n        margin: 0 auto;\r\n        background: #fdfbff; \r\n    }\r\n\r\n    .sidebar { \r\n        width: 280px; \r\n        position: sticky; \r\n        top: 20px; \r\n        height: fit-content; \r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .sidebar .topic { \r\n        display: block; \r\n        padding: 12px; \r\n        text-decoration: none; \r\n        color: #444; \r\n        border-radius: 8px; \r\n        margin-bottom: 8px; \r\n        background: #fff;\r\n        border: 1px solid #eee;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .sidebar .topic.active { \r\n        background: var(--brand-purple); \r\n        color: white; \r\n        border-color: var(--brand-purple);\r\n    }\r\n\r\n    \/* Main Content *\/\r\n    .main-content { \r\n        flex: 1; \r\n        font-family: 'Segoe UI', sans-serif; \r\n        min-width: 0; \r\n    }\r\n\r\n    .article-card { \r\n        background: white; \r\n        padding: 30px; \r\n        border-radius: 15px; \r\n        box-shadow: 0 4px 15px rgba(0,0,0,0.05); \r\n    }\r\n\r\n    h1 { color: var(--brand-purple); font-size: 2.2rem; margin-bottom: 20px; }\r\n    h2 { color: #333; margin-top: 30px; border-left: 4px solid var(--brand-purple); padding-left: 15px; }\r\n    \r\n    .custom-img { \r\n        display: block; \r\n        margin: 30px auto; \r\n        width: 100%; \r\n        max-width: 600px; \r\n        border: 2px solid #e9d5ff; \r\n        border-radius: 10px;\r\n    }\r\n\r\n    pre { \r\n        background: #1a1a2e; \r\n        color: #fff; \r\n        padding: 20px; \r\n        border-radius: 10px; \r\n        overflow-x: auto; \r\n        margin: 20px 0;\r\n    }\r\n\r\n    code { font-family: 'Consolas', monospace; color: #ff79c6; }\r\n\r\n    table { \r\n        width: 100%; \r\n        border-collapse: collapse; \r\n        margin: 20px 0; \r\n    }\r\n\r\n    table th, table td { \r\n        border: 1px solid #eee; \r\n        padding: 12px; \r\n        text-align: left; \r\n    }\r\n\r\n    table th { background: #f8f9fa; color: var(--brand-purple); }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 991px) {\r\n        .python-full-layout { flex-direction: column; }\r\n        .sidebar { width: 100%; position: relative; top: 0; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"python-full-layout\">\r\n    <aside class=\"sidebar\">\r\n        <h2 style=\"font-size: 1.2rem; color: var(--brand-purple); margin-bottom: 15px;\">React Hooks<\/h2>\r\n        <a href=\"#definition\" class=\"topic active\">What is useEffect?<\/a>\r\n        <a href=\"#syntax\" class=\"topic\">1. Basic Syntax<\/a>\r\n        <a href=\"#dependencies\" class=\"topic\">2. Dependency Array<\/a>\r\n        <a href=\"#cleanup\" class=\"topic\">3. Cleanup Function<\/a>\r\n        <a href=\"#mcq\" class=\"topic\">Practice MCQs<\/a>\r\n    <\/aside>\r\n\r\n    <main class=\"main-content\">\r\n        <article class=\"article-card\">\r\n            \r\n            <header id=\"definition\">\r\n                <h1>useEffect Hook in React<\/h1>\r\n                <p>The <code>useEffect<\/code> hook allows you to perform <strong>side effects<\/strong> in functional components. Side effects are actions that happen \"outside\" the normal component rendering, such as fetching data, directly updating the DOM, or setting up subscriptions.<\/p>\r\n            <\/header>\r\n\r\n\r\n            <section id=\"syntax\">\r\n                <h2>1. Basic Syntax<\/h2>\r\n                <p>The hook takes two arguments: a callback function and an optional dependency array.<\/p>\r\n                <pre><code>useEffect(() => {\r\n  \/\/ Your side effect logic here\r\n  console.log(\"Component rendered!\");\r\n}, [dependencies]);<\/code><\/pre>\r\n            <\/section>\r\n\r\n            <section id=\"dependencies\">\r\n                <h2>2. The Dependency Array<\/h2>\r\n                <p>The second argument controls <strong>when<\/strong> the effect runs:<\/p>\r\n                <table>\r\n                    <thead>\r\n                        <tr>\r\n                            <th>Value<\/th>\r\n                            <th>When it runs<\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody>\r\n                        <tr><td><code>undefined<\/code> (No array)<\/td><td>Runs on <strong>every<\/strong> render.<\/td><\/tr>\r\n                        <tr><td><code>[]<\/code> (Empty array)<\/td><td>Runs only <strong>once<\/strong> (on mount).<\/td><\/tr>\r\n                        <tr><td><code>[prop, state]<\/code><\/td><td>Runs on mount and whenever <strong>prop\/state<\/strong> changes.<\/td><\/tr>\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/section>\r\n\r\n            \r\n\r\n            <section id=\"cleanup\">\r\n                <h2>3. The Cleanup Function<\/h2>\r\n                <p>Sometimes an effect needs to be \"cleaned up\" (e.g., stopping a timer or unsubscribing from a chat). To do this, return a function from your <code>useEffect<\/code>.<\/p>\r\n                <pre><code>useEffect(() => {\r\n  const timer = setInterval(() => { console.log('Tick') }, 1000);\r\n\r\n  \/\/ Cleanup Function\r\n  return () => clearInterval(timer);\r\n}, []);<\/code><\/pre>\r\n            <\/section>\r\n\r\n            <section id=\"mcq\" class=\"practice-mcqs\">\r\n                <h2>Knowledge Check<\/h2>\r\n                <div class=\"mcq-box\" style=\"background: #f9f4ff; padding: 20px; border-radius: 10px; border: 1px solid #e9d5ff;\">\r\n                    <p><strong>1. Which dependency array ensures the effect runs only once after the initial render?<\/strong><br>\r\n                    A) No array | B) <strong>[]<\/strong> | C) [0]<\/p>\r\n                    \r\n                    <p><strong>2. What is the primary purpose of useEffect?<\/strong><br>\r\n                    A) Storing local state | B) <strong>Handling side effects<\/strong> | C) Styling components<\/p>\r\n\r\n                    <p><strong>3. When does the \"cleanup function\" run?<\/strong><br>\r\n                    A) Before the effect runs again | B) When the component unmounts | C) <strong>Both A and B<\/strong><\/p>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <div style=\"text-align: center; margin-top: 40px;\">\r\n                <a href=\"https:\/\/codematrix.co.in\/courses\" target=\"_blank\" style=\"background: var(--brand-purple); color: white; padding: 12px 25px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold;\">\r\n                    \ud83d\ude80 Master React Hooks!\r\n                <\/a>\r\n            <\/div>\r\n\r\n        <\/article>\r\n    <\/main>\r\n<\/div>\r\n\r\n<script>\r\nwindow.addEventListener('DOMContentLoaded', () => {\r\n    const sections = document.querySelectorAll('header[id], section[id]');\r\n    const navLinks = document.querySelectorAll('.sidebar .topic');\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                navLinks.forEach(link => {\r\n                    link.classList.remove('active');\r\n                    if (link.getAttribute('href') === `#${entry.target.id}`) {\r\n                        link.classList.add('active');\r\n                    }\r\n                });\r\n            }\r\n        });\r\n    }, { threshold: 0.5 });\r\n    sections.forEach(section => observer.observe(section));\r\n});\r\n<\/script>\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>React Hooks What is useEffect? 1. Basic Syntax 2. Dependency Array 3. Cleanup Function Practice MCQs useEffect Hook in React The useEffect hook allows you to perform side effects in functional components. Side effects are actions that happen &#8220;outside&#8221; the normal component rendering, such as fetching data, directly updating the DOM, or setting up subscriptions. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6023","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages\/6023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/comments?post=6023"}],"version-history":[{"count":7,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages\/6023\/revisions"}],"predecessor-version":[{"id":6741,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages\/6023\/revisions\/6741"}],"wp:attachment":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/media?parent=6023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}