react2024.yml

locale: en-US
translations:
  ###########################################################################
  # General
  ###########################################################################

  - key: general.results.description
    t: The 2024 edition of the annual survey about the latest trends in the React ecosystem.

  - key: general.react2024.ai2025_banner
    t: Take the State of Web Dev AI survey and help us figure out AI's impact on the web! →

  ###########################################################################
  # Introduction
  ###########################################################################

  - key: general.react2024.survey_intro
    t: |
      Let's face it: neither you or I have the dedication, patience, and sheer force of will it would take to properly keep up with the React ecosystem, as new APIs, new libraries, and even new versions are introduced week after week. 

      Thankfully for all of our sakes, one individual has willingly taken on that burden: I'm talking about none other than [This Week in React](https://thisweekinreact.com/)'s Sebastien Lorber. 

      Sebastien has lent us his knowledge to make sure this year's survey covers all bases. This means that by taking this survey not only will you help provide the community with valuable insights, but you will also get a chance to catch up with any developments you might've missed.

      So once again, please join me for this year's State of React!

  - key: features.features_intro.react2024
    t: |
      Welcome to the survey! This first part is all about sharing your experience with various React features:


      - **Never heard of it**: it's your first time seeing this – or you've heard of it but have no idea what it does. 

      - **Heard of it**: you've read or learned about this, but haven't actually used it yet. 

      - **Used it**: you've used this at least once, even if it was just to play around. 


      By the way, if you want to tell us more about any of your choices, just click that little "comment" icon!

  - key: tools.tools_intro.react2024
    t: |
      This next part of the survey is all about the various libraries and frameworks that make up the React ecosystem.

  - key: introduction.react2024
    t: |

      <span class="first-letter">T</span>his has been a year of consolidation for React.

      With the community still reeling from the introduction of React Server Components, the lack of any major breaking changes was very welcome.

      Instead, React 19 focused on taking a lot of our pain away, from making `forwardRef` obsolete, to diffs for hydration errors, to a new compiler that makes our code more performant with minimal extra work on our part. 

      Yet while React itself may be trying to calm things down, the ecosystem is still innovating at a furious pace. For example, an ongoing story over the past year has been the TanStack team leveraging TanStack Query's success into the creation of TanStack Start, a potential challenger to Next.js' meta-framework crown – especially for those who aren't ready to embrace the server-first approach.  

      But for now at least, let's take a breather and celebrate the relative stability of the world's most popular JavaScript library. 

      *Please note that this in an unofficial survey unaffiliated with Meta, Vercel, or the React team.*

      <span class="conclusion__byline">– Sacha Greif</span>

  ###########################################################################
  # Tshirt
  ###########################################################################

  - key: sections.tshirt.title
    t: T-shirt

  - key: sections.tshirt.description
    t: |
      ## Support the Survey With the official State of React T-Shirt

      Is it a library? A framework? An unknown element on the verge of mutating into a dangerous, unstable entity? Whatever your feelings about React, you will find them reflected in this design that echoes anime and science-fiction.

  - key: tshirt.about
    t: About the T-shirt

  - key: tshirt.description
    t: |
      We use a high-quality shirt printed by our partners at Cotton Bureau.

  - key: tshirt.getit
    t: Get It

  - key: tshirt.price
    t: USD $32 + shipping

  - key: tshirt.designer.heading
    t: About the Designer

  - key: tshirt.designer.name
    t: Christopher Kirk-Nielsen

  - key: tshirt.designer.bio
    t: |
      Originally from France but now based in the United States, Chris is not just an amazing front-end developer, but also a talented illustrator who specializes in retro visuals. In fact, we encourage you to also check out his [other t-shirt designs](https://chriskirknielsen.com/designs)!

  ###########################################################################
  # Content
  ###########################################################################

  # user_info

  - key: sections.user_info.description.react2024
    t: |
      **7,870** respondents took part in this second edition of the State of React survey. A small sample of the overall community to be sure, but still large enough to provide us with valuable data!

  - key: user_info.country.takeaway.react2024
    t: |
      The majority of respondents came from the **U.S.** and **Europe**.

  - key: user_info.age.takeaway.react2024
    t: |
      With a mean age of 32.4 years old, the average State of React respondent turned out to be slightly younger than the State of JS (33.5) orState of CSS (34.9).

  - key: user_info.years_of_experience.takeaway.react2024
    t: |
      59% of respondents have less than 10 years of experience, meaning they never knew a world without React (which is itself nearly 12 years old!).

  - key: user_info.company_size.takeaway.react2024
    t: |
      44% of respondents worked for companies with over 100 employees.

  - key: user_info.yearly_salary.takeaway.react2024
    t: |
      Survey respondents had a slightly higher median salary ($75,000) compared to State of JavaScript results ($70,000). Yet the same income disparities held through when looking at the U.S. vs the rest of the world.

  - key: user_info.job_title.takeaway.react2024
    t: |
      “Engineer” continues to be the most lucrative job title, while “Developer” remains at the bottom of the ladder.

      And just like in the most recent [State of JavaScript survey results](https://2024.stateofjs.com/en-US/demographics/#job_title), fullstack and frontend positions were staffed by the youngest respondents on average, and frontend job titles were also correlated with a significantly higher proportion of women.

  - key: user_info.higher_education_degree.takeaway.react2024
    t: |
      Unlike results shown by other surveys, this time the lack of a higher education degree did not seem to correlate with lower income levels.

  - key: user_info.gender.takeaway.react2024
    t: |
      At 92% men, this edition's gender demographics remained consistent with previous surveys, showing that more effort is still needed to broaden the reach of the survey and ensure it represents all facets of the community.

  - key: user_info.race_ethnicity.takeaway.react2024
    t: |
      It's encouraging to see the proportion of Hispanic and Latin respondents climb from 11% to 19%, potentially coinciding with the rise in popularity of Spanish and Portuguese-speaking streamers and educators.

  - key: user_info.disability_status.takeaway.react2024
    t: |
      Whether permanent or temporary, the fact that disabilities are a part of daily life for many is worth keeping in mind whenever we build new apps.

  - key: user_info.locale.takeaway.react2024
    aliasFor: user_info.locale.description

  - key: user_info.completion_stats.takeaway.react2024
    aliasFor: user_info.completion_stats.description

  # features

  - key: sections.features.description.react2024
    t: |
      We asked respondents about their thoughts on **28** distinct features, from omnipresent hooks such as `useState`, to more niche APIs like `useDeferredValue`. Be sure to try and sort by “sentiment”!

  - key: features.all_features
    t: All Features

  - key: features.all_features.takeaway.react2024
    t: |
      This chart recaps all of the survey's feature questions. The main bars represent a respondent's experience; and they are then further subdivided according to that respondent's sentiment. You can change the grouping to alternate between both.


      Worth highlighting this year: `createPortal`, while only used by 46.4% of respondents, was the fifth most loved feature. The Taint API on the other hand was both the least used and most unknown feature – which make sense since it's still experimental.


      On the opposite end of the spectrum, `useState` was not only the most used feature but also the most beloved with only 1.26% of negative sentiment, which goes to show that simple solutions will always have their place.

  - key: features.reading_list.takeaway.react2024
    t: >
      **25%** of respondents added at items to their reading list while taking the survey in order to learn more about them later. Here is a breakdown of their picks.

  - key: features.main_apis_items
    t: Main APIs Experience & Sentiment
  - key: features.main_apis_pain_points.takeaway.react2024
    t: >
      Just like last year, `forwardRef` and `memo` were the top pain points among the most common React APIs. With React 19 now out and promising to alleviate both issues, it'll be interesting to see what this chart looks like next year.

  - key: features.hooks_items
    t: Hooks Experience & Sentiment
  - key: features.hooks_pain_points.takeaway.react2024
    t: >
      `useEffect` is still the most problematic React hook, in large part due to having to manually manage dependency arrays.

  - key: features.new_apis_items
    t: New APIs Experience & Sentiment
  - key: features.new_apis_pain_points.takeaway.react2024
    t: >
      **React Server Components** and overall complexity are still the top pain points when it comes to taking advantage of React's newer features.

  # libraries

  - key: sections.libraries.description.react2024
    t: |
      We reworked our charts to highlight not just developer experience, but *sentiment*. Be sure to explore these new grouping and sorting options to figure out which libraries get the most love… or the least!

  - key: tools.all_tools_experience
    t: Libraries Experience & Sentiment
  - key: tools.all_tools_experience.takeaway.react2024
    t: >
      Among React libraries and frameworks, **TanStack Query** and **Zustand** have overtaken **Next.js** to take the lead the way in terms of overall positivity.


      And while **Create React App** may be the most used framework, it's also one of the most disliked with 33.1% of negative opinions, right after Redux's 34.1%.


      Note that some items such as `useState` and `fetch` were also included as points of comparison, even though they're not libraries themselves.

  - key: tools.scatterplot_overview
    t: Libraries Retention vs Usage
  - key: tools.scatterplot_overview.takeaway.react2024
    t: >
      Among libraries and frameworks, **Next.js** was still the only item boasting both high retention and high usage. That being said, **TanStack Query** does seem to be on the verge of crossing over into the >50% usage quadrant anytime now!

  # component libraries

  - key: tools.component_libraries_experience
    t: Component Libraries Experience & Sentiment
  - key: tools.component_libraries_experience.takeaway.react2024
    t: >
      **React Aria** and **Radix** lead the rankings in terms of positivity, proving that the headless approach to component libraries has a lot going for it.

  - key: tools.component_libraries_ratios
    t: Component Libraries Ratios Over Time
  - key: tools.component_libraries_ratios.takeaway.react2024
    t: >
      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%!

  - key: tools.animation_libraries.takeaway.react2024
    t: >
      **Motion** (previously known as Framer Motion) takes a well-deserved first place to celebrate its recent rebranding!

  - key: tools.data_visualization_libraries.takeaway.react2024
    t: >
      **Chart.js** tops the rankings this year. By the way, did you know that all of this survey's chart are custom-built?

  - key: tools.form_libraries.takeaway.react2024
    t: >
      **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.

  - key: tools.react_form_patterns.takeaway.react2024
    t: >
      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!

  - key: tools.css_tools.takeaway.react2024
    t: >
      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.

  - key: tools.component_libraries_pain_points.takeaway.react2024
    t: >
      With the amount of pain caused by **styling & customization** issues, it's no wonder “headless” libraries such as **Radix** and **React Aria** have proven so popular.

  # state management

  - key: tools.state_management_experience
    t: State Management Experience & Sentiment
  - key: tools.state_management_experience.takeaway.react2024
    t: >
      Beyond **useState**, the state management solution with the highest positivity ratio is **Zustand**. And while **Redux** still boasts a large userbase, it isn't quite as beloved.

  - key: tools.state_management_ratios
    t: State Management Ratios Over Time
  - key: tools.state_management_ratios.takeaway.react2024
    t: >
      **Zustand** confirms its lead in terms of positivity, with only the default **useState** scoring higher. It's also grown in terms of usage, going from 28% to 41% over the past year!

  - key: tools.state_management_others.takeaway.react2024
    t: >
      While **TanStack Query** is best known as a data loading library, it does a great job of managing the resulting state as well.

  - key: tools.state_management_pain_points.takeaway.react2024
    t: >
      State management as a whole remains unnecessarily complex, with **Redux** in particular taking a lot of the blame from respondents.

  # data loading

  - key: tools.data_loading_experience
    t: Data Loading Experience & Sentiment
  - key: tools.data_loading_experience.takeaway.react2024
    t: >
      **TanStack Query** has been making waves for a while now, and it turns out its reputation is reflected in the data since it's the data loading method respondents felt the most positive about, right after the native `fetch` API.

  - key: tools.data_loading_ratios
    t: Data Loading Ratios Over Time
  - key: tools.data_loading_ratios.takeaway.react2024
    t: >
      **TanStack Query** continues its growth trajectory, both in terms of usage and positivity. The interest graph in particular reveals that –along with **tRPC**– it's pretty much the only data loading library that is still intriguing respondents today!

  - key: tools.data_loading_others.takeaway.react2024
    t: >
      Besides **ky** and **URQL**, no new data loading library scored more than the minimum 10 mention threshold.

  - key: tools.data_loading_pain_points.takeaway.react2024
    t: >
      The fact that **state management** was cited as the biggest issues when it comes to data loading may explain the popularity of **TanStack Query**, since it tackes that issue head-on. 


      Yet overall, the fact that only 3% of respondents shared a pain point at all shows that data loading may actually have somehow become one of the *least* painful parts of modern web apps.

  # back-end infrastructure

  - key: tools.meta_frameworks_experience
    t: Meta-Frameworks Experience & Sentiment
  - key: tools.meta_frameworks_experience.takeaway.react2024
    t: >
      While you'll certainly have no trouble finding people complaining about **Next.js**, it still managed to top the positivity rankings for meta-frameworks, followed by **Remix** and **Astro**.

  - key: tools.meta_frameworks_ratios
    t: Meta-Frameworks Ratios Over Time
  - key: tools.meta_frameworks_ratios.takeaway.react2024
    t: >
      The only framework showing strong usage growth is **Astro**, going from 18% to 26%. Also worth noting that **TanStack Start** made a very strong debut at 81% interest and 90% retention!

  - key: tools.meta_frameworks_others.takeaway.react2024
    t: >
      **Waku** is notable in that it's one of the few frameworks that were started after the advent of React Server Components, with the intent of taking full advantage of them from the start.

  - key: tools.build_tools.takeaway.react2024
    t: >
      **Vite** has now overtaken **Webpack**, which is quite remarkable given how long Webpack has been around.

  - key: tools.hosting.takeaway.react2024
    t: >
      **Vercel** leads the rankings, which is understandable given its heavy investment in the React ecosystem.

  - key: tools.other_services.takeaway.react2024
    t: >
      **Firebase** is still a popular data storage platform, while **Sentry** remains most people's go-to for error tracking.

  - key: tools.backend_language.takeaway.react2024
    t: >
      As expected, **TypeScript** and **JavaScript** power most React app's back-ends, showing that developers put a premium on keeping their entire codebase in the same language.

  - key: tools.back_end_infrastructure_pain_points.takeaway.react2024
    t: >
      Oftentimes, the most common pain points will be generic issues such as “excessive complexity” or ”tough learning curve” – but not this time. 

      **End-to-end typesafety** (sharing types between server and client; and making sure any data transferred comforms to them) is clearly this year's top issue when it comes to back-end infrastructure, and it explains why we're now seeing tools such as **TanStack Start** and **tRPC** appear to solve it.

  #other_tools

  - key: sections.other_tools.description.react2024
    t: |
      React is known for focusing on UI rendering while being fairly agnostic about the other parts of your app, and that's reflected in the vibrant ecosystem that has emerged to fill these gaps!

  - key: tools.testing.takeaway.react2024
    t: |
      **Jest** and **Testing Library** maintained their lead this year. **Bun** also showed up with a few write-ins, which depending on the overall success of the new runtime might either be a one-time anomaly, or a sign of things to come.

  - key: tools.renderers.takeaway.react2024
    t: |
      As expected the vast majority of developers render their app in the browser, but this question highlights just how diverse the React ecosystem really is, with renderers for everything from PDFs to command-line apps!

  - key: tools.validation.takeaway.react2024
    t: |
      As you might've guessed, **Zod** is still the most common validation library.

  - key: tools.auth.takeaway.react2024
    t: |
      Depending on whether you prefer a hosted service or a self-hosted solution, **Auth0** and **Auth.js** are both great options.

  - key: tools.mobile_development.takeaway.react2024
    t: |
      While **React Native** still has its first place, **Expo** is gaining ground fast, and it would not be surprising to see it stealing the top spot within a year.

  - key: tools.other_frontend_frameworks.takeaway.react2024
    t: |
      What do React devs use when they're not using React? Turns out, **Angular** and **Vue**, just like everybody else!

  # usage

  - key: sections.usage.description.react2024
    t: |
      No matter what version you use, application pattern you adopt, or industry sector you belong to, there's no wrong way to use React!

  - key: usage.what_do_you_use_react_for.takeaway.react2024
    t: >
      It's interesting to see that despite React traditionally being associated with complex client-side apps, **Static sites** still came in second, showing that JSX can also work great as a simple templating language.

  - key: usage.react_version.takeaway.react2024
    t: >
      Note that the survey was conducted **before** the stable release of React 19.

  - key: usage.usage_type.takeaway.react2024
    t: >
      The overwhelming majority of respondents use React professionally.

  - key: usage.industry_sector.takeaway.react2024
    t: >
      **Programming & Technical Tools** may be slightly over-represented as an industry sector, as it often attracts the type of developer most likely to fill out a survey such as this one.

  - key: usage.js_app_patterns.takeaway.react2024
    t: >
      Despite the recent focus on static site generation, server-side rendering, and server components, it's interesting to note that the vast majority of React developers still work on Single Page Applications.

  - key: usage.new_features.takeaway.react2024
    t: >
      With `memo` being a longstanding pain point, it makes sense that respondents would be most excited about the **React Compiler**.

  - key: usage.usage_pain_points.takeaway.react2024
    t: >
      Once more, **excessive complexity** stands out as a major issue. It remains to be seen if a new generation of tooling will finally be able to alleviate our pain, or if that complexity is simply a natural consequence of the way the web works.

  # resources

  - key: sections.resources.description.react2024
    t: |
      One of the big reason for React's continued dominance is the sheer amount of documentation, blog posts, videos, and other resources it has accumulated over the years. Here's just a small sample!

  - key: resources.learning_methods.takeaway.react2024
    t: |
      The React team has done a great job with the new React docs site, so it shouldn't be surprised that it has become the number one way people learn about the framework.

  - key: resources.blogs_news_magazines.takeaway.react2024
    t: |
      While this list is populated by many usual suspects, it's worth celebrating the presence of React-specific media such as **This Week in React** or **React Status**.

  - key: resources.courses.takeaway.react2024
    t: |
      It's always impressive to see how educators like **Wes Bos** or **Epic React**'s Kent C. Dodds can rank almost as high as entire platforms such as **Udemy** or **freeCodeCamp**.

  - key: resources.podcasts.takeaway.react2024
    t: |
      **Syntax** continues to assert its dominance over the dev podcast landscape, and while there still really isn't much in terms of web-focused React podcasts, **React Native Radio** comes in at a very honorable #8.

  - key: resources.video_creators.takeaway.react2024
    t: |
      While **Fireship** was surpisingly low in the rankings last year, the popular YouTuber now tops the video creator podium, ahead of **Theo** and **The Primeagen**.

  - key: resources.people.takeaway.react2024
    t: |
      With a huge climb from 17 to 5, **shadcn** is doing their best to match their own library's popularity!

  - key: resources.other_surveys.takeaway.react2024
    t: |
      While it's no surprise that many respondents also take the **State of JavaScript** survey, it's worth noting that a majority also fill out the **State of CSS**, indicating that the JS/CSS divide may not be as big as we often make it to be.

  #awards
  - key: sections.awards.description.react2024
    t: |
      This year's awards were dominated by one very specific project… how quickly will you guess what it is?

  # metadata

  - key: user_metadata.source.takeaway.react2024
    t: >
      A majority of respondents knew about the survey from previous years or other surveys, but newsletters such as **This Week in React** were also a large source of traffic.

  ###########################################################################
  # Charts
  ###########################################################################

  - key: options.features_categories.language
    aliasFor: sections.language.title
  - key: options.features_categories.browser_apis
    aliasFor: sections.browser_apis.title
  - key: options.features_categories.other_features
    aliasFor: sections.other_features.title

  ###########################################################################
  # Notes
  ###########################################################################

  - key: blocks.gender.note
    t: |
      If you're interested in learning more, we [wrote a blog post](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) that addresses the survey's gender dynamics.

  - key: blocks.source.note
    t: >

      This chart aggregates a mix of referrers, URL parameters, and freeform answers. 

      - State of JS: the [State of JS](https://stateofjs.com) mailing list.

      - State of CSS: the State of CSS mailing list; also matches `email`, `by email`, etc.

      - Work: matches `work`, `colleagues`, `coworkers`, etc.

  ###########################################################################
  # Awards
  ###########################################################################

  - key: award.feature_adoption_delta_award.comment
    t: With a **{value}** progression in 2022, **top-level await** has quickly become an integral part of JavaScript.

  - key: award.tool_usage_delta_award.comment
    t: |
      **Vite** continues to be the fastest-growing library out there, with a **{value}** year-over-year increase in usage!

  - key: award.tool_satisfaction_award.comment
    t: Vite once again takes the top spot, with **{value}** of developers willing to use it again!

  - key: award.tool_interest_award.comment
    t: Did you guess Vite? Close, but this year **Vitest** is the technology developers are most interested in with a **{value}** interest ratio.

  - key: award.most_write_ins_award.comment
    t: With **{value}** mentions, **Bun** was the most mentioned technology overall in freeform questions.

  - key: award.most_commented_tool_award.comment
    t: With **{value}** comments, React showed that it's once again the most-discussed library around.

  - key: award.most_loved_tool_award.comment
    t: With **{value}** of all developers having a positive opinion of it, Vite concludes its sweep of these awards by being the most-loved technology around!

  ###########################################################################
  # Conclusion
  ###########################################################################

  - key: conclusion.react2024.sebastien_lorber
    t: |

      <span class="first-line">What a great time to be a React developer!</span>

      This year started with a [React Labs update](https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024) and a [tweet](https://x.com/acdlite/status/1758229889595977824) from Andrew Clark promising we’d never need to use forwardRef again — the [most disliked React feature](../features/#all_features). Fast forward, and this promise has been largely fulfilled, with [React 19](https://react.dev/blog/2024/12/05/react-19) introducing exciting new features to play with along the way.

      It was a close call, though: the new version was set to launch in [June](https://x.com/acdlite/status/1797668537349328923), when the [Suspense drama](https://tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts) unfolded, delaying the release until December. An optimization to render Suspense fallbacks sooner inadvertently introduced a Suspense siblings waterfall issue in many client-side apps. Fortunately, the React team went the extra mile to preserve the optimization while preventing waterfalls by introducing a new [Suspense siblings pre-warming](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense) feature.

      Aside from the long wait, the adoption of this version has been relatively smooth from my perspective. The `18.3` release introduced extra warnings to help prepare our apps ahead of time, and the React team did an outstanding job minimizing breaking changes and documenting them thoroughly in the [upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide). Of course, we're still wrapping our heads around all the new features and APIs, but client-side React, as we know and love it, is now better than ever.

      The introduction of React Server Components and Server Actions brings us new, powerful primitives tightly integrated into frameworks. Next.js, the leading implementation, demonstrates their benefits but also highlights new challenges in routing and caching, which have led to pushback in the community. Personally, I think it’s perfectly fine to continue using React on the client side and eventually adopt server-side features if they make sense for your project, once best practices become clearer.

      But this year wasn’t just about React 19 — it was also the year React Native’s [New Architecture](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here) became ready for production, marking a significant leap forward for the cross-platform ecosystem. We also got the [React Compiler](https://react.dev/blog/2024/10/21/react-compiler-beta-release) in beta. Initially presented as an auto-memoizing compiler, it’s actually a fully fledged optimization platform for React, set to become much more powerful in the future.

      These new foundations lay the groundwork for a bright future in 2025. We’ve only begun to tap into their potential, with many impactful features and integrations ahead. Similar to the introduction of hooks, we could be on the brink of a React renaissance.

  - key: conclusion.react2024.sebastien_lorber.bio
    t: |
      [This Week In React](https://thisweekinreact.com/) founder and [Docusaurus](https://docusaurus.io/) maintainer

  ###########################################################################
  # Picks
  ###########################################################################

  - key: picks.my_pick
    t: "My 2024 Pick: "
  - key: picks.intro
    t: We asked members of the React community to share their “pick of the year”

  - key: picks.jack_herrington.name
    t: Tanstack Start
  - key: picks.jack_herrington.bio
    t: Principal Engineer and YouTuber
  - key: picks.jack_herrington.description
    t: |
      Full-time Tanner is just the boost that Tanstack needed to take it next level. And Tanner is delivering on the promise of his stack with Tanstack Start on top of the whole Tanstack ecosystem.

  - key: picks.sebastien_lorber.name
    t: TanStack Router
  - key: picks.sebastien_lorber.bio
    t: Creator of [This Week in React](https://thisweekinreact.com/)
  - key: picks.sebastien_lorber.description
    t: |
      This new router, launched in v1 in December 2023, proves that innovation in type safety and search parameters management remains possible. Strong adoption began in 2024, with very positive feedback from the community.

  - key: picks.aurora_scharff.name
    t: |
      nuqs: Type-safe search params state manager for React
  - key: picks.aurora_scharff.bio
    t: Web developer and consultant at Inmeta
  - key: picks.aurora_scharff.description
    t: |
      My pick would be [François Best](https://bsky.app/profile/francoisbest.com) and his library [nuqs](https://nuqs.47ng.com/). Recently made available for other React frameworks besides Next.js, it solves many pain points when working with URL search params, and the API is super smooth and easy to use.

  - key: picks.shaundai_person.name
    t: CodeTV (formerly Learn with Jason)
  - key: picks.shaundai_person.bio
    t: Front end Senior Software Engineer (Netflix) and course instructor
  - key: picks.shaundai_person.description
    t: |
      Jason’s mission is to make programming fun and accessible for everyone, and he is doing such an incredible job of it. In one series, Jason and 3 devs are faced with the challenge to create an app based on a short coding prompt like “build a leaderboard” or “build an e-commerce site”. And his newest series is a web dev game show that is kind of like a mix of Jeopardy and Hot Ones!

  - key: picks.josh_comeau.name
    t: Lucide Icons
  - key: picks.josh_comeau.bio
    t: Software engineer and educator. Creator of [The Joy of React](https://www.joyofreact.com/)
  - key: picks.josh_comeau.description
    t: |
      Lucide is a fork of Feather Icons, adding hundreds of new icons in the same delightful style. Their React bindings are so good; super easy to use, and highly optimized!

  - key: picks.sacha_greif.name
    t: React Scan
  - key: picks.sacha_greif.bio
    t: Creator @ Devographics
  - key: picks.sacha_greif.description
    t: |
      When I first saw a demo of React over a decade ago, one of its big selling points was how fast it could render long, complex web pages. Yet today, poor performance and excessive re-renderings are often held up as weaknesses of the framework. So it's great to see tools like [Million](https://million.dev/) creator [Aiden Bai](https://aiden.mov/)'s React Scan take on this challenge and give you new ways to improve React's performance.

  # - key: picks.xxx.name
  #   t:
  # - key: picks.xxx.bio
  #   t:
  # - key: picks.xxx.description
  #   t: |

  # - key: picks.xxx.name
  #   t:
  # - key: picks.xxx.bio
  #   t:
  # - key: picks.xxx.description
  #   t: |

  ###########################################################################
  # Sponsors
  ###########################################################################

  - key: sponsors.frontendmasters.description
    t: Advance your skills with in-depth, modern front-end engineering courses.
  - key: sponsors.google_chrome.description
    t: Thanks to the Google Chrome team for supporting our work.
  - key: sponsors.tokyodev.description
    t: Find your dream developer job in Japan today.
  - key: sponsors.renderatl.description
    t: The tech conference focused on all things web.

  - key: sponsors.gitnation.description
    t: Learn the latest trends directly from early-adopters and tech authors at GitNation.com
  - key: sponsors.reactsummit.description
    t: The biggest React conference worldwide. Stay ahead of trends with 50+ speakers, network and party with 1,500 developers, enjoy the Amsterdam summer, and much more!
  - key: sponsors.reactparis.description
    t: The premier two-day, single-track React conference you don't need to miss in 2025.

  ###########################################################################
  # FAQ/About
  ###########################################################################

  # React 2023

  - key: faq.data_used_react2024
    t: How will this data be used?
  - key: faq.data_used_react2024.description
    t: >
      All data collected will be released openly for anybody to consult. Developers or companies may use it to prioritize focus areas and inform their roadmaps.

  - key: faq.survey_goals_react2024
    t: What are the survey's goals?
  - key: faq.survey_goals_react2024.description
    t: >
      The survey's goals are to measure awareness and popularity of React APIs, as well as libraries in the React ecosystem.

  - key: faq.who_should_take_survey_react2024
    t: Who should take this survey?
  - key: faq.who_should_take_survey_react2024.description
    t: >
      This is an open survey for anybody who uses React, whether regularly or occasionally, as part of their job, as a student, or just for fun!

  - key: faq.how_long_will_survey_take_react2024
    t: How long will answering the survey take?
  - key: faq.how_long_will_survey_take_react2024.description
    t: >
      Depending on how many questions you answer (all questions are optional),
      filling out the survey should take around 15-20 minutes.

  - key: faq.survey_design_react2024
    t: How was this survey designed?
  - key: faq.survey_design_react2024.description
    t: >
      The survey was designed with input from the community through an [open feedback thread](https://github.com/Devographics/surveys/issues/250).

  - key: faq.results_released_react2024
    t: When will the results be released?
  - key: faq.results_released_react2024.description
    t: The survey will run from October 19 to November 19, and the survey results will be released shortly after that.

  - key: about.content
    t: |
      The 2024 State of React survey ran from October 19 to November 19 2024, and collected 7,870 responses. The results were published on February 10, 2025. The survey is run by [Devographics](https://devographics.com/). 

      The State of React logo and t-shirt were designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).

      ### Survey Goals

      This survey was created to identify upcoming trends in the React ecosystem in order to help developers make technological choices. 

      As such, the survey is focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why features or technologies may sometimes be omitted even if they are currently widespread 

      It should also be taken as a **snapshot of a specific subset of developers**, and is not meant to speak for the entire React ecosystem. 

      ### Survey Design

      The survey was designed in part based on last year's survey, with an open feedback period where the survey outline was discussed [on GitHub](https://github.com/Devographics/surveys/issues/250). 

      All survey questions were optional. 

      ### Survey Audience

      The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic. 

      Note that frameworks, libraries, etc. were free to encourage their audience to participate in the survey and some of them did take advantage of this via banners, tweets, etc. A detailed breakdown of traffic sources is included in the Metadat section's "Sources" chart. 

      ### Project Funding

      Funding from this project comes from a variety of sources:

      - **T-shirt sales**. 

      - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).

      - **Direct Funding**: this year, [Google](https://www.google.com/), [GitNation](https://gitnation.com/) and [TokyoDev](https://www.tokyodev.com/) funded my work on the surveys. 

      Any contribution or sponsorship is greatly appreciated. We would especially like to work closely with more browser vendors, since they play such a central role in the web ecosystem.  

      ### Technical Overview

      You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a).

      **Note: This is *not* an official React survey, and the survey team is not affiliated with Meta, Vercel, or the React team.**

      ### Special Thanks

      Special thanks to Paul McMahon, Marc Grabanski, and Sébastien Lorber.