DEV Community: Lawrences Web Dev

When to Use useEffect and useLayoutEffect in React

Lawrences Web Dev — Tue, 28 Nov 2023 05:09:12 +0000

React Hooks, introduced in React 16.8, have completely changed the way we write components in React. They allow us to use state and other React features without writing a class. Two of these hooks, useEffect and useLayoutEffect, are used to perform side effects in function components. But when should we use each one? Let's explore both hooks and find out.

What is useEffect?

The useEffect hook is used to perform side effects in function components. A side effect could be anything that affects something outside of the scope of the current function being executed. Examples include data fetching, setting up a subscription, manually changing the DOM, and so on.

Here is an example of useEffect:

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

The function passed to useEffect will run after the render is committed to the screen. Think of effects as an escape hatch from React’s purely functional world into the imperative world.

What is useLayoutEffect?

The useLayoutEffect hook has the same signature as useEffect. However, it fires synchronously after all DOM mutations. This can be useful when you need to make new updates and measurements after the DOM updates, but before the browser has a chance to "paint" those changes, such as reading layout from the DOM or synchronously re-rendering.

Here is an example of useLayoutEffect:

useLayoutEffect(() => {
  ref.current.style.color = 'blue';
}, []); // Only run once

When to use useEffect vs useLayoutEffect?

The primary difference between useEffect and useLayoutEffect lies in the timing of execution. useEffect runs asynchronously and after a render is painted to the screen. useLayoutEffect, on the other hand, runs synchronously after a render but before the screen is updated.

If you’re migrating code from a class component, note useLayoutEffect fires in the same phase as componentDidMount and componentDidUpdate.

Here are some general rules of thumb:

If you need to mutate the DOM and/or do measurements and then make further updates, you'd want to use useLayoutEffect to ensure these updates occur before the browser has a chance to paint. This can help prevent flickering on the screen.
For other cases, including data fetching and subscriptions, useEffect is the way to go. It won't block the painting process, leading to better perceived performance.

Always remember, each tool has its place. Understanding the difference between useEffect and useLayoutEffect allows us to make better decisions about which to use when, for the best possible user experience.

Remember, while useLayoutEffect can prevent flickering, using it excessively can lead to performance problems, as it blocks visual updates. So, unless you need to make updates and measurements before the browser "paints", stick with useEffect.

In conclusion, understanding the difference between useEffect and useLayoutEffect is crucial to ensure your React app's performance. Use the right hook at the right time, and you're on your way to creating a smooth and efficient React application.

UseState why?

Lawrences Web Dev — Wed, 22 Nov 2023 00:56:56 +0000

Understanding useState:
The useState hook allows us to add state to functional components without the need for class-based components. It provides a more effective way of managing state compared to directly modifying variables for rendering reasons.

Let's consider a simple example to understand why useState is preferred over changing variables directly for rendering:

import React, { useState } from "react";

const StateManipulation = () => {
  let counter = 0;

  const increment = () => {
    counter++;
  };

  return (
    <div>
      {counter}
      <button onClick={increment}>Increment</button>
    </div>
  );
};

In this example, we have a counter variable that is incremented when the button is clicked. However, modifying the counter variable directly does not trigger a re-render of the component. As a result, the updated value of counter will not be reflected in the UI.

By using useState, we ensure that when the state is updated, React knows to re-render the component and update the UI accordingly. Let's see how the same example can be modified to use useState:

import React, { useState } from "react";

const StateManipulation = () => {
  const [counter, setCounter] = useState(0);

  const increment = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      {counter}
      <button onClick={increment}>Increment</button>
    </div>
  );
};

In this modified version, we use the useState hook to create a state variable counter and its corresponding setter function setCounter. By calling setCounter with the updated value of counter, React knows that the state has changed and triggers a re-render, updating the UI with the new value.

Benefits of useState over direct variable modification:

Automatic Re-rendering: Using useState ensures that the component re-renders when the state is updated, reflecting the changes in the UI.
React's Virtual DOM: React efficiently updates only the necessary parts of the UI that have changed, optimising performance.
State Management: useState provides a clear and structured approach to manage component-level state, making the code more maintainable and easier to understand.

UseState is particularly beneficial as it triggers automatic re-rendering, ensuring that state updates are reflected in the UI. By embracing the useState hook, you can build robust and maintainable React components.

Happy coding!

Understanding the Basics of React: Virtual DOM and the useState Hook (Part 2)

Lawrences Web Dev — Thu, 16 Nov 2023 11:41:40 +0000

In the Tree component, each TreeNode represents a node in the tree structure. The value prop of each TreeNode represents the content or data associated with that node. The nested structure of the TreeNode components represents the hierarchical relationship between the nodes.

Similarly, in the virtual DOM, React constructs a tree-like representation of your component hierarchy. Each component corresponds to a node in the virtual DOM tree, and the nested components create a hierarchical structure.

import React, { useState } from 'react';

const TreeNode = ({ value, children }) => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpanded = () => {
    setExpanded((prevExpanded) => !prevExpanded);
  };

  return (
    <div>
      <div>
        <button onClick={toggleExpanded}>
          {expanded ? '-' : '+'}
        </button>
        <span>{value}</span>
      </div>
      {expanded && <div style={{ marginLeft: '20px' }}>{children}</div>}
    </div>
  );
};

const Tree = () => {
  return (
    <TreeNode value="Root">
      <TreeNode value="Node 1">
        <TreeNode value="Leaf 1" />
        <TreeNode value="Leaf 2" />
      </TreeNode>
      <TreeNode value="Node 2">
        <TreeNode value="Leaf 3" />
      </TreeNode>
    </TreeNode>
  );
};

export default Tree;

In this example, we have a TreeNode component that represents a node in a tree. Each TreeNode can have children nodes. The Tree component renders the root node with its nested nodes.

When the "expanded" state changes for a TreeNode, React intelligently updates the corresponding portion of the real DOM. If a node is expanded, its children are rendered and displayed with an indentation. If a node is collapsed, its children are not rendered and hidden from the view.

By using the Virtual DOM, React efficiently manages the rendering and updates of the tree structure. It only updates the necessary parts of the tree when the state changes, resulting in optimized performance.

This example demonstrates how the Virtual DOM in React simplifies the handling of complex UI structures, such as trees, by efficiently managing the rendering and updates.

I hope this additional example helps in understanding the concept of the Virtual DOM in React!

In React, the virtual DOM is a lightweight representation of the actual DOM. It is a JavaScript object tree that reflects the structure of your components and their rendered output. The virtual DOM is used by React to efficiently update the real DOM when changes occur in your application.

While the tree structure in the Tree component example provided earlier does not directly represent the virtual DOM in React, it can serve as an analogy to understand the concept.

When there are changes in your application state or props, React will reconcile the virtual DOM with the actual DOM. It performs a diffing algorithm to identify the minimal set of changes needed to synchronize the real DOM with the virtual DOM.

By comparing the old and new virtual DOM trees, React determines which parts of the real DOM need to be updated, added, or removed. This process is efficient because React minimizes the number of actual DOM manipulations required.

So, while the specific tree structure in the Tree component doesn't directly represent the virtual DOM, it can help you understand the concept of a hierarchical representation that React uses to efficiently update the real DOM. The virtual DOM in React is an internal data structure that React uses to manage and optimize the rendering process.

Understanding the Basics of React: Virtual DOM and the useState Hook (Part 1)

Lawrences Web Dev — Thu, 16 Nov 2023 04:59:26 +0000

Introduction:

React has revolutionized the way we build user interfaces by introducing the concept of a Virtual DOM. This powerful feature allows for efficient rendering and updating of components. In this blog post, we will explore the fundamentals of the Virtual DOM and its significance in React development. We will also dive into the useState hook, a fundamental tool for managing state in React components. By the end, you'll have a solid understanding of these concepts and how they work together to create dynamic and performant React applications.

The Virtual DOM:

The Virtual DOM is a lightweight representation of the actual DOM (Document Object Model) in memory. Rather than directly manipulating the real DOM, React interacts with the Virtual DOM, which is a JavaScript object. This approach provides several benefits:

Performance Optimization: When a component's state changes, React doesn't immediately update the real DOM. Instead, it compares the previous and current versions of the Virtual DOM to determine the minimum number of changes needed. This process is known as reconciliation. By minimizing DOM updates, React significantly improves performance.
Efficient Rendering: React efficiently updates only the specific components that require changes. It intelligently applies updates to the real DOM, resulting in faster rendering times compared to traditional approaches.

The useState Hook:

The useState hook is a built-in hook in React that allows functional components to manage state. It provides a way to introduce stateful behavior into stateless functional components. The useState hook takes an initial value and returns an array with two elements: the current state value and a function to update it.

Example: Changing a Value Without Rerendering the Component

Let's consider a simple example where we have a counter component that increments a value but doesn't trigger a rerender of the entire component. We can achieve this using the useState hook.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

In this example, we initialize the count state to 0 using the useState hook. The handleClick function updates the count state by incrementing its value when the button is clicked. By using the functional form of the state update (prevCount => prevCount + 1), we ensure that we are working with the previous state value.

The beauty of the Virtual DOM and the useState hook is that React intelligently updates only the portion of the component that has changed. In this case, when the count state updates, React only updates the corresponding portion of the real DOM, resulting in efficient rendering without unnecessary rerenders of the entire component.

Building Accessible Web Applications with React: A Real-Life Approach (Part 2)

Lawrences Web Dev — Thu, 16 Nov 2023 01:57:20 +0000

Keyboard Navigation and Focus Management

Keyboard navigation is a critical aspect of web accessibility. Users who rely on keyboard input need to be able to navigate through your application and interact with its components easily. In React, you can handle keyboard events and manage focus using event handlers and ref elements. Here's an example of handling keyboard events and focus management in a React component:

class MyButton extends React.Component {
  handleClick = () => {
    // Handle button click logic
  };

  handleKeyPress = (event) => {
    if (event.key === "Enter" || event.key === " ") {
      this.handleClick();
    }
  };

  render() {
    return (
      <button onClick={this.handleClick} onKeyPress={this.handleKeyPress}>
        Click me
      </button>
    );
  }
}

Providing Alternative Text for Images

Images play a crucial role in web applications, but they also present challenges for individuals with visual impairments. To make images accessible, it's important to provide alternative text (alt text) that describes the content or function of the image. In React, you can add alt text to the img element like this:

function App() {
  return (
    <div>
      <img src="example.jpg" alt="Example Image" />
    </div>
  );
}

Color Contrast and Visual Design

Color contrast is essential for users with visual impairments or color vision deficiencies. It ensures that text and other important elements are distinguishable from the background. In React, you can dynamically adjust color contrast using a library like polished. Here's an example of dynamically adjusting color contrast in a React component:

import { readableColor } from 'polished';

function ColorContrastText({ backgroundColor }) {
  const textColor = readableColor(backgroundColor);

  return (
    <div style={{ backgroundColor, color: textColor }}>
      Text with dynamically adjusted color contrast
    </div>
  );
}

Testing for Accessibility

Ensuring the accessibility of your React application requires thorough testing. There are several tools and libraries available that can assist you in detecting accessibility issues. One such tool is jest-axe, which integrates with the Jest testing framework to perform automated accessibility testing. You can use it to write tests that check for accessibility violations. Here's an example:

import { axe } from 'jest-axe';

test('MyComponent should be accessible', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);

  expect(results).toHaveNoViolations();
});

Building accessible web applications is a responsibility that we should all embrace as developers. In this two-part blog series, we explored the fundamentals of web accessibility and learned how React can be used to create inclusive applications. By incorporating best practices, such as using semantic HTML, managing keyboard navigation, providing alternative text for images, considering color contrast, and testing for accessibility, we can ensure that our React applications are accessible to all users.

Remember, accessibility is an ongoing process. Stay updated with the latest accessibility guidelines and continue to prioritise inclusive design and development practices in your projects.

Thank you for reading, and happy building!

Stay tuned for more informative and engaging content on web development and accessibility.

Building Accessible Web Applications with React: A Real-Life Approach (Part 1)

Lawrences Web Dev — Thu, 16 Nov 2023 01:54:48 +0000

In today's tech-driven world, web applications have become an integral part of our daily lives. It is crucial to ensure that these applications are accessible to everyone, including individuals with disabilities. In this two-part blog series, we will explore how we can build accessible web applications using React, a popular JavaScript library for building user interfaces. In Part 1, we will cover the fundamentals of web accessibility and how React can be leveraged to create inclusive applications.

Understanding Web Accessibility

Web accessibility focuses on designing and developing websites and web applications that can be accessed and used by individuals with disabilities. It aims to remove barriers and provide alternative means of access to information and functionality. Disabilities can include visual impairments, hearing impairments, motor disabilities, cognitive impairments, and more. Web accessibility ensures that everyone, regardless of their abilities, can perceive, understand, navigate, and interact with websites effectively.

The Importance of Web Accessibility

Inclusivity and Equal Access

Web accessibility is essential for creating inclusive digital experiences. It ensures that individuals with disabilities can participate fully in the digital world, accessing information, products, and services without facing unnecessary barriers. By embracing web accessibility, we create an environment that respects diversity and promotes equal access to opportunities and experiences.

Legal and Ethical Considerations

Web accessibility is not just a matter of goodwill; it also has legal and ethical implications. Many countries have implemented accessibility laws and regulations that require websites to meet specific accessibility standards. By adhering to these standards, organizations can avoid legal consequences and demonstrate their commitment to social responsibility.

Leveraging React for Web Accessibility

React provides a powerful foundation for creating accessible web applications. It offers a component-based architecture and a virtual DOM, making it easier to manage and update the application's accessibility features. By following best practices, we can ensure that our React applications are inclusive and provide equal access to all users.

Semantic HTML and ARIA Roles

One of the key aspects of web accessibility is using semantic HTML elements and ARIA (Accessible Rich Internet Applications) roles. React encourages the use of semantic HTML tags, such as <nav>, <main>, <button>, and <input>, which provide built-in accessibility features. Additionally, ARIA roles can be applied to custom components to enhance their accessibility. By using these features appropriately, we improve the overall accessibility of our React applications.

Example


jsx
// Using semantic HTML elements and ARIA roles in a React component
function Navigation() {
  return (
    <nav>
      <ul>
        <li><a href="/" role="menuitem">Home</a></li>
        <li><a href="/about" role="menuitem">About</a></li>
        <li><a href="/contact" role="menuitem">Contact</a></li>
      </ul>
    </nav>
  );
}

The Front-End Developer's Journey: The non technical side

Lawrences Web Dev — Tue, 14 Nov 2023 12:07:34 +0000

Welcome to the fast-paced and ever-evolving world of front-end development! As a front-end developer, you're embarking on an exciting journey filled with new challenges, growth opportunities, and a chance to showcase your technical skills. In this blog post, we'll explore the difficulties that front-end developers face, particularly when starting in a large corporate environment with limited technical experience. We'll delve into the diverse range of projects, the struggle to bridge the gap between designers and developers, and the exhilaration that comes with navigating the ever-changing landscape of front-end development.

Imagine stepping into a bustling corporate setting armed with just your degree and a passion for technology. This scenario is all too familiar for many front-end developers. You'll find yourself quickly immersed in various projects, ranging from proof of concepts to client-driven initiatives. The scale of these projects can vary, sometimes with you as the sole front-end developer, while other times you'll be working in a team of ten or more.

Navigating the technical challenges is a crucial part of your journey as a front-end developer. While you may have learned the fundamentals during your degree, applying that knowledge in the real world can be overwhelming. However, it's in the face of these challenges that your skills truly sharpen.

One significant hurdle you'll encounter is the communication gap between designers and developers. Designers often have a keen eye for aesthetics, while developers bring their technical expertise to the table. It's not uncommon to find yourself in situations where the designer's vision is challenging to implement due to technical constraints.

For instance, picture a scenario where a designer presents an intricate animation concept that looks visually stunning but poses significant technical complexities during implementation. This is where clear communication becomes paramount. As a front-end developer, it's essential to foster open dialogue with the designer, explaining the technical limitations and proposing alternative solutions that preserve the essence of their vision. This collaborative approach fosters understanding, mutual respect, and ultimately leads to a successful implementation.

Despite the hurdles, being a front-end developer is an exhilarating and fulfilling experience. Each day brings a new set of challenges and opportunities for personal and professional growth. Front-end development is a field that constantly evolves, and staying ahead of the curve is part of the excitement.

The ever-changing landscape of front-end technologies keeps you on your toes. New frameworks, libraries, and best practices emerge regularly, providing you with continuous learning opportunities. Each project you undertake presents a unique set of requirements and constraints, allowing you to expand your problem-solving abilities and unleash your creativity.

As you gain experience, you'll become more adaptable and resilient. The challenges that seemed overwhelming in the beginning gradually transform into stepping stones that propel you forward in your career. The thrill of conquering difficult tasks and witnessing your code come to life is unparalleled.

In conclusion, front-end development isn't without its difficulties, especially when starting in a large corporate environment with minimal technical experience. However, the variety of projects, the challenge of bridging the gap between designers and developers, and the ever-evolving nature of the field make it an exciting and rewarding career path.

Remember that every obstacle you encounter is an opportunity for growth. Embrace the challenges, foster effective communication, and celebrate the diversity and constant evolution of front-end development. Your perseverance and passion will pave the way for a successful and fulfilling career in this dynamic field.

So, fellow front-end developers, keep pushing boundaries, never stop learning, and savor the thrill of conquering the unknown. Your journey as a front-end developer has only just begun!

Web Development: Navigating the Maze and Getting Stuff Done!

Lawrences Web Dev — Tue, 14 Nov 2023 10:47:31 +0000

Web Development Unleashed: Navigating the Maze and Getting Stuff Done!

Welcome to my blog! If you've ever found yourself lost in the wild world of web development, wondering how to crack into the industry without much help from school or a clue where to start, you're in the right place. Buckle up as I share awesome resources, real-world tips, and kickass tech tools that'll help you conquer the web development game like a pro.

Embracing the Challenge

Why I Fell Head Over Heels for Web Development

Let's dive into my personal obsession with web development and why it gets me all fired up. We'll talk about the crazy demand for web developers and the epic opportunities that come with it. I'll vent about the frustration of university not teaching us enough about web dev and how it leaves us hanging.

Giving University the Side-Eye: The Web Dev Education Gap

I'll spill the tea on why our beloved universities often fail to keep up with the rapidly evolving world of web development. We'll chuckle (or cringe) at how outdated their curricula can be compared to the lightning-fast pace of tech. I'll make a case for taking the reins of our own learning and finding alternative resources to level up.

Navigating the Wild Web Development Landscape

The Adventure of Self-Directed Learning

Let's channel our inner explorers and uncover the secrets of successful self-learning in web development. I'll introduce you to some rockin' platforms like interactive coding websites, coding bootcamps, and mind-blowing online tutorials. We'll geek out about how these resources can give us mad skills and make us the masters of our own destiny.

Real-World Web Dev Goodies

Brace yourself for a treasure trove of incredible resources that'll skyrocket your web development journey. I'll spill the beans on wicked coding websites, awesome YouTube channels, buzzing online communities, and books that'll have you shouting, "Eureka!" We'll high-five over the importance of hands-on projects and contributing to open-source to get that sweet, sweet practical experience.

Supercharging Your Web Dev Powers with Tech Tools

Code Like a Boss with Integrated Development Environments (IDEs)

I'll let you in on the secret weapons of web developers: IDEs that make coding feel like a piece of cake. We'll geek out over killer features like code completion, debugging tools, and seamless integration with version control. Boom!

Collaborate and Conquer with Project Management Tools

Let's talk teamwork and get you hooked on collaboration platforms like GitHub and Bitbucket for version control and team wizardry. We'll crack the whip on project management tools like Trello, Asana, or Jira to whip your workflow into shape and boost your productivity.

Automate and Optimize with Cool Tools

Say goodbye to mundane tasks with automation tools like Grunt, Gulp, or Webpack that'll have you feeling like a coding superhero. I'll introduce you to code linters, formatters, and testing frameworks that'll keep your code quality on fleek and make you the envy of your developer friends.