Search for a command to run...
As a passionate Software Developer, I thrive on crafting dynamic and user-centric applications. With a strong foundation in full-stack development, I'm dedicated to delivering top-notch experiences through robust code and innovative solutions.
No comments yet. Be the first to comment.
Learn all about React Hooks with me! This fun and engaging series covers everything from State Management to Custom Hooks, with easy-to-understand explanations and real-life examples.
React's context API allows you to share data between components without having to pass props down through every level of the component tree. The useContext hook is used to access the value of a context object in a functional component. Creating a Con...
Chrome DevTools is a powerful suite of tools provided by the Chrome browser to help developers debug, analyze, and optimize their web applications. This guide covers essential aspects of using Chrome DevTools, including debugging issues, debugging me...
Memory management is a crucial aspect of any programming language, and JavaScript is no exception. Understanding how memory is allocated and managed helps in writing efficient and optimized code. This guide covers the memory lifecycle and garbage col...
This guide covers key advanced JavaScript concepts: Iterators and Generators, Classes, and Modules (CommonJS and ECMAScript Modules). By mastering these topics, you'll be equipped to handle more complex JavaScript applications and write cleaner, more...
Asynchronous programming in JavaScript allows you to perform long-running operations without blocking the main thread, ensuring your applications remain responsive. This guide covers the key concepts and techniques for handling asynchronous operation...
The this keyword in JavaScript is a fundamental part of the language that can be a source of confusion for many developers. Understanding how this works in different contexts is crucial for writing effective and bug-free code. This comprehensive guid...
In React, side effects are any actions that are performed outside of rendering a component, such as fetching data or updating the document title. React provides two main hooks for managing side effects: useEffect and useLayoutEffect.
The useEffect hook allows you to perform side effects in functional components. It takes two arguments: a callback function that performs the side effect and an array of dependencies that specify when the effect should be executed. Here's an example:
import { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}
In this example, we use useEffect to update the document title when the count state changes. We pass an array containing count as a dependency, which tells React to re-run the effect whenever count changes.
The useLayoutEffect hook is similar to useEffect, but it runs synchronously after all DOM mutations. This means that it can be used to perform side effects that require access to the DOM, such as measuring the size of an element. Here's an example:
import { useState, useLayoutEffect } from 'react';
function ElementSize() {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const measureElement = () => {
const { width, height } = document.getElementById('element').getBoundingClientRect();
setWidth(width);
setHeight(height);
};
useLayoutEffect(() => {
measureElement();
window.addEventListener('resize', measureElement);
return () => {
window.removeEventListener('resize', measureElement);
};
}, []);
return (
<div>
<div id="element" style={{ width: '100px', height: '100px', backgroundColor: 'red' }}></div>
<p>Width: {width}px</p>
<p>Height: {height}px</p>
</div>
);
}
In this example, we use useLayoutEffect to measure the size of a red box and display it on the page. We define a measureElement function that gets the bounding rectangle of the element and updates the state with the width and height. We then use useLayoutEffect to call measureElement and add a resize event listener to update the size when the window is resized. We pass an empty array as a dependency, which tells React to run the effect only once when the component is mounted.
useEffect and useLayoutEffect are the main hooks for managing side effects in React. useEffect is used for asynchronous side effects and useLayoutEffect is used for synchronous side effects that require access to the DOM. In the next article in this series, we'll cover the context hook, useContext.