Danh mụcThẻBài viết

admin

I'm a Full-stack developer

Thẻ

Linked List
Data Structure
Chat GPT
Design Pattern
Microservices
API
AWS CDK
ReactJS
AWS Lightsail
Flutter Mobile
Part 3: React Fragments
Ngày đăng: 18/06/2023

In this part, I will show you about good benefits when using fragments in React.


Previous articles:

PART 1: REACT PROPS AND STATE
PART 2: THE HOOKS ARE USED POPULARLY IN REACT


What are fragments?


Fragments to group a list of children without adding extra nodes to the DOM, and has no effect on the resulting DOM. It is the same as if the elements were not grouped.


You need to use either or a shorter syntax having an empty tag (<></>).


Below is an example of how to use fragments inside the UsernameWithAvatar component.

const UsernameWithAvatar({username, description, photoUrl}) {
  return (
      <>
        <h2>{username}</h2>
        <p>{description}</p>
        <img src={photoUrl} alt="Username with avatar"/>
      </>
    );
}


Why fragments are better than container divs?

  • Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
  • Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout.
  • The DOM Inspector is less cluttered.


Wish you all good study !!!

Đề xuất

How to secure your API gateway
admin17/04/2024

How to secure your API gateway
In this blog, I will cover the 6 methods that technology leaders need to incorporate to secure and protect APIs.
Part 4: How to use Redux Toolkit in React
admin18/06/2023

Part 4: How to use Redux Toolkit in React
In this article, I will explain Redux and delve into Redux Toolkit. a collection of tools that simplify using Redux. These tools help make Redux less daunting and easier to use.
TypeScript Design Pattern - Proxy
admin11/08/2023

TypeScript Design Pattern - Proxy
Provide a surrogate or placeholder for another object to control access to it.
Mới nhất

TypeScript Design Pattern - Builder
admin07/08/2023

TypeScript Design Pattern - Builder
TypeScript Design Pattern - Builder
Design Patterns
admin07/08/2023

Design Patterns
The design pattern does not be a specific programming language. Almost programming languages might apply design patterns that to resolve a problem repeat.
TypeScript Design Pattern - Proxy
admin11/08/2023

TypeScript Design Pattern - Proxy
Provide a surrogate or placeholder for another object to control access to it.
Đinh Thành Công Blog

My website, where I write blogs on a variety of topics and where I have some experiments with new technologies.

hotlinelinkedinskypezalofacebook
DMCA.com Protection Status
Góp ý
Họ & Tên
Số điện thoại
Email
Nội dung
Tải ứng dụng
hotline

copyright © 2023 - AGAPIFA

Privacy
Term
About