[{"content":"React\u0026rsquo;s useEffect hook is a powerful tool for managing side effects in functional components. It allows you to perform tasks like data fetching, subscriptions, or manual DOM manipulations after the component has rendered.\nBasic Syntax The useEffect hook accepts two arguments: a function for the effect and an optional array of dependencies.\nuseEffect(() =\u0026gt; { // Side effect logic goes here }, [dependencies]); Dependency Behaviors The way useEffect triggers depends on the dependency array provided:\nNo array provided: The effect runs after every single render. Empty array ([]): The effect runs only once, immediately after the initial mount. Array with values: The effect runs on mount and whenever any of the values in the array change. import React, { useState, useEffect } from \u0026#39;react\u0026#39;; function Example() { const [count, setCount] = useState(0); useEffect(() =\u0026gt; { document.title = `You clicked ${count} times`; }, [count]); // Only re-run the effect if count changes return ( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;You clicked {count} times\u0026lt;/p\u0026gt; \u0026lt;button onClick={() =\u0026gt; setCount(count + 1)}\u0026gt;Click me\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ); } Cleanup Functions To prevent memory leaks, some effects require a cleanup phase (e.g., clearing a timeout or unsubscribing from an API). You can achieve this by returning a function from within the effect.\nuseEffect(() =\u0026gt; { const timer = setTimeout(() =\u0026gt; { console.log(\u0026#39;Action after 1 second\u0026#39;); }, 1000); // Cleanup function return () =\u0026gt; clearTimeout(timer); }, []); Downsides and Pitfalls While useEffect is a versatile tool, it comes with several downsides:\nInfinite Loops: It\u0026rsquo;s easy to accidentally trigger an infinite loop if you update a state variable that is included in the dependency array. Stale Closures: If the dependency array is not correctly managed, the effect might capture outdated values from previous renders. Complexity: Components with many effects can become difficult to read, as the logic for a single feature may be spread across multiple lifecycle phases. Race Conditions: Asynchronous operations like data fetching can result in race conditions where an older request resolves after a newer one, potentially leading to inconsistent UI state. Performance Overhead: Frequent execution of effects can lead to performance issues if the logic inside the effect is computationally expensive. ","permalink":"https://mirohhh.github.io/site/posts/my-third-post/","summary":"\u003cp\u003eReact\u0026rsquo;s \u003ccode\u003euseEffect\u003c/code\u003e hook is a powerful tool for managing side effects in functional components. It allows you to perform tasks like data fetching, subscriptions, or manual DOM manipulations after the component has rendered.\u003c/p\u003e\n\u003ch3 id=\"basic-syntax\"\u003eBasic Syntax\u003c/h3\u003e\n\u003cp\u003eThe \u003ccode\u003euseEffect\u003c/code\u003e hook accepts two arguments: a function for the effect and an optional array of dependencies.\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-javascript\" data-lang=\"javascript\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003euseEffect\u003c/span\u003e(() =\u0026gt; {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#75715e\"\u003e// Side effect logic goes here\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}, [\u003cspan style=\"color:#a6e22e\"\u003edependencies\u003c/span\u003e]);\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch3 id=\"dependency-behaviors\"\u003eDependency Behaviors\u003c/h3\u003e\n\u003cp\u003eThe way \u003ccode\u003euseEffect\u003c/code\u003e triggers depends on the dependency array provided:\u003c/p\u003e","title":"React's useEffect hook"},{"content":"The journey didn\u0026rsquo;t start in a classroom or a high-tech lab; it started in a messy bedroom with a cheap laptop and a sudden, burning curiosity about how the \u0026ldquo;Inspect Element\u0026rdquo; tool actually worked. I remember the visceral thrill of changing a background color from white to #ff0000 (an aggressive, eye-searing red) and realizing that the internet wasn\u0026rsquo;t some immutable monolith. It was a construction site, and I had just found a hammer.\nBuilding the Foundation The initial honeymoon phase with HTML5 was pure, unadulterated creation. I learned the semantic weight of an \u0026lt;article\u0026gt; tag and the structural necessity of a \u0026lt;footer\u0026gt;. But then, I met CSS.\nCSS was a fickle friend. It taught me patience through the \u0026ldquo;Floats vs. Flexbox\u0026rdquo; wars and the absolute madness of the early Grid specifications. I spent hours wrestling with z-index values, wondering why my navigation bar was hiding behind a background image like a shy child. Yet, when the layout finally \u0026ldquo;snapped\u0026rdquo; into place—responsive, fluid, and beautiful—it felt like solving a 4D Rubik\u0026rsquo;s Cube.\nThe Logic Leap If HTML was the bones and CSS was the skin, JavaScript was the nervous system. Moving from styling to scripting felt like moving from painting to puppetry.\nSuddenly, my pages weren\u0026rsquo;t just static documents; they were interactive experiences. I recall the first time an API call successfully returned data. Seeing a weather widget update in real-time with data from halfway across the world felt like actual magic. I wasn\u0026rsquo;t just building layouts anymore; I was building systems.\nasync function getData() { try { const response = await fetch(\u0026#39;https://api.example.com/v1/data\u0026#39;); const data = await response.json(); console.log(\u0026#34;The digital handshake was successful:\u0026#34;, data); } catch (error) { console.error(\u0026#34;The void remains silent.\u0026#34;, error); } } Navigating the Ecosystem Then came the \u0026ldquo;Framework Fatigue.\u0026rdquo; I dipped my toes into the waters of React, finding solace in its component-based philosophy. The idea that everything—from a button to a complex dashboard—could be a self-contained, reusable piece of logic changed how I viewed software architecture. I learned about state management, hooks, and the delicate dance of the Virtual DOM.\nThe journey eventually led me to the back-end. Learning about Node.js and SQL was like looking under the hood of a car. I began to understand the weight of data, the importance of security, and the intricate choreography of a full-stack application.\nReflections from the Terminal Today, my code looks much different than it did that first night. It’s cleaner, more resilient, and more thoughtful. But the core feeling remains the same. Every time I open a code editor, I’m greeted by that same blinking cursor—a reminder that there is always something new to build, a bug to squash, or a technology to master.\nWeb development isn\u0026rsquo;t just about code; it\u0026rsquo;s about solving problems for people. It\u0026rsquo;s about accessibility, performance, and the joy of creating something out of nothing.\nMy Advice for Fellow Travelers: Embrace the Error: A red console is not a failure; it’s a map to the solution. Build, Don’t Just Watch: Tutorials are great, but you don\u0026rsquo;t learn to swim by watching someone else in the pool. Stay Curious: The web changes every day. Be the person who is excited by that change, not intimidated by it. The odyssey continues.\n","permalink":"https://mirohhh.github.io/site/posts/my-second-post/","summary":"\u003cp\u003eThe journey didn\u0026rsquo;t start in a classroom or a high-tech lab; it started in a messy bedroom with a cheap laptop and a sudden, burning curiosity about how the \u0026ldquo;Inspect Element\u0026rdquo; tool actually worked. I remember the visceral thrill of changing a background color from white to \u003ccode\u003e#ff0000\u003c/code\u003e (an aggressive, eye-searing red) and realizing that the internet wasn\u0026rsquo;t some immutable monolith. It was a construction site, and I had just found a hammer.\u003c/p\u003e","title":"My Journey into Web Development"},{"content":"Hello world! This is my first blog post.\nThis is a test for fork syncing what should happen:\nchanges on upstream sync with fork every hour website content should update ","permalink":"https://mirohhh.github.io/site/posts/my-first-post/","summary":"\u003cp\u003eHello world! This is my first blog post.\u003c/p\u003e\n\u003ch3 id=\"this-is-a-test-for-fork-syncing\"\u003eThis is a test for fork syncing\u003c/h3\u003e\n\u003cp\u003ewhat should happen:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003echanges on upstream sync with fork every hour\u003c/li\u003e\n\u003cli\u003ewebsite content should update\u003c/li\u003e\n\u003c/ul\u003e","title":"My First Post"}]