Gå til innhold

State of React 2024

Komponentbibliotek

Byggesteinene til din applikasjon

Component Libraries Ratios Over Time

While MUI maintains in top rank in terms of usage, shadcn/ui is making huge gains, doubling from 20% to 42% in a year; as well as topping the positivity chart with 80%!

Ant Design
Chakra UI
Headless UI
MUI
Radix
React Bootstrap
shadcn/ui
React Aria
Mantine

Modus:

Visning:

Bruk:

Proportion of respondents having used an item
0%
20%
40%
60%
80%
100%
2023
2024
0%
20%
40%
60%
80%
100%

Number of Items

How many items in this category respondents have used.

0%
6%
11%
17%
23%
28%
1

0

2,232
2

1

1,315
3

2

1,366
4

3

1,125
5

4

804
6

5

498
7

6

280
8

7

130
9

8

78
10

9

42
0%
6%
11%
17%
23%
28%
% av deltagere i undersøkelsen
2.1
💡
Du kan trykke på enhver teknologi for å se ekstra detaljer, og ta et dypdykk inn i dataen.

Andre komponentbibliotek

Hvilke andre komponentbiblioteker har du brukt?
Fritekstformat
Multiple
0%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

9

10

0%
20%
40%
60%
80%
100%
% besvarelser på spørsmål
516
7%
Vi spurte medlemmer av React-fellesskapet om å dele sitt "årets valg"

Min valg for 2024: Instant Search Params med React Server Components

Dette blogginnlegget tar for seg et problem du mest sannsynlig vil støte på når du bygger en skikkelig app med Next.js App Router: håndtering av søkeparametere. Det er overraskende vanskelig å få interaksjoner til å oppføre seg "perfekt", og innlegget avsluttes med løsningen: useOptimistic. Det lærer deg også om overganger med mange sandkasse-demoer.
Vi spurte medlemmer av React-fellesskapet om å dele sitt "årets valg"

Aurora Scharff

Webutvikler og konsulent hos Inmeta

Animasjon

Motion (previously known as Framer Motion) takes a well-deserved first place to celebrate its recent rebranding!

Hvilke biblioteker har du brukt for animasjon?
Multiple
0%
20%
40%
60%
80%
100%
1

2,883
2

1,488
3

1,022
4

927
5

844
6

287
7

8

9

10

🚫 Ingen

1,880
11

Andre svar

97
0%
20%
40%
60%
80%
100%
% besvarelser på spørsmål
5,971
76%

Datavisualisering

Chart.js tops the rankings this year. By the way, did you know that all of this survey's chart are custom-built?

Hvilke datavisualiserings- og grafikkbiblioteker har du brukt?
Multiple
0%
20%
40%
60%
80%
100%
1

2,978
2

2,338
3

1,888
4

1,149
5

375
6

302
7

241
8

234
9

194
10

0%
20%
40%
60%
80%
100%
% besvarelser på spørsmål
5,906
75%

Skjemabiblioteker

React Hook Form is by far the most common form library today. But with the growing popularity of the TanStack, er, stack, it'll be interesting to keep an eye on TanStack Forms in the future.

Hvilke biblioteker har du brukt for å håndtere skjemaer?
Multiple
0%
20%
40%
60%
80%
100%
1

4,275
2

2,795
3

670
4

449
5

281
6

154
7

8

33
9

10

11

12

🚫 Ingen

961
13

Andre svar

114
0%
20%
40%
60%
80%
100%
% besvarelser på spørsmål
6,037
77%

Form Patterns

Interestingly, a majority of developers is comfortable using both controlled and uncontrolled forms.

That being said, if you must pick only one then controlled form inputs seem like the way to go!

Which form pattern do you usually prefer using?
0%
20%
40%
60%
80%
100%
1

Both, depending on the situation

3,103
2

Controlled form components

2,335
3

Uncontrolled form components

606
4

Andre svar

16
0%
20%
40%
60%
80%
100%
% besvarelser på spørsmål
6,044
77%

CSS-verktøy og bibliotek

Did Tailwind kill CSS-in-JS? Or did CSS itself simply catch up? In any case the days of getting fancy with CSS architecture seem to be over, as the top three spots are all taken by longstanding CSS tools.

Hvilke biblioteker eller rammeverk har du brukt for å style React-appene dine?
Multiple
0%
20%
40%
60%
80%
100%
1

4,587
2

3,991
3

3,772
4

3,715
5

1,973
6

1,198
7

372
8

220
9

219
10

182
0%
20%
40%
60%
80%
100%
% besvarelser på spørsmål
6,276
80%

Component Pain Points

What pain points have you encountered related to working with components?
Fritekstformat
Multiple
0%
20%
40%
60%
80%
100%
1

Styling & customization

2

Form issues

3

Tailwind issues

4

CSS-in-JS

5

MUI issues

6

Performance

7

Excessive complexity

8

Styled Components issues

9

Andre svar

Svar som matcher “Andre svar” 278
0%
20%
40%
60%
80%
100%
% besvarelser på spørsmål
272
3%

Anbefalte ressurser

Tailwind CSS
Steve Kinney
Temporal

Tailwind CSS

By the end of this course, you'll be proficient in building visually stunning, responsive, and maintainable user interfaces with Tailwind CSS!
Design Systems with Storybook, v2
Steve Kinney
Temporal

Design Systems with Storybook, v2

Create reusable UI components with composable styles and variants using Tailwind CSS. Use MDX for documentation, set up interaction testing, and add data fetching to create a robust dev environment for your component library.
Takk til våre partnere for deres bidrag! Lær mer.