diff --git a/state_of_react.yml b/state_of_react.yml index 49219be86fe..ba73d8289d2 100644 --- a/state_of_react.yml +++ b/state_of_react.yml @@ -90,9 +90,9 @@ translations: # - key: sections.testing.description # t: Testing utilities and libraries - - key: sections.other_tools.title + - key: sections.tools.title t: Other Tools - - key: sections.other_tools.description + - key: sections.tools.description t: Other React utilities and libraries - key: sections.usage_react.title @@ -261,7 +261,7 @@ translations: # tools - key: tools.component_libraries_others - t: Other Libraries + t: Other Component Libraries - key: tools.component_libraries_others.question t: What other component libraries have you used? @@ -323,9 +323,9 @@ translations: - key: tools.back_end_infrastructure_pain_points.question t: What pain points have you encountered related to back-end and infrastructure? - - key: other_tools.testing + - key: tools.testing t: Testing Libraries - - key: other_tools.testing.question + - key: tools.testing.question t: Which libraries do you use to test your React apps? # - key: tools.testing_happiness @@ -333,9 +333,9 @@ translations: # - key: tools.testing_happiness.description # t: How happy are you with the current state of testing libraries? - - key: other_tools.mobile_development + - key: tools.mobile_development t: Mobile Development - - key: other_tools.mobile_development.question + - key: tools.mobile_development.question t: Which libraries have you used for mobile development? # - key: tools.mobile_development_others @@ -346,94 +346,94 @@ translations: # t: How happy are you with the current state of mobile development? # other tools - - key: other_tools.form_libraries + - key: tools.form_libraries t: Form Libraries - # - key: other_tools.form_libraries.description + # - key: tools.form_libraries.description # t: Libraries for generating and validating forms. - - key: other_tools.form_libraries.question + - key: tools.form_libraries.question t: Which libraries have you used to manage forms? - key: options.form_libraries.na t: None - - key: other_tools.build_tools + - key: tools.build_tools t: Build Tools - # - key: other_tools.build_tools.description + # - key: tools.build_tools.description # t: Build tools and bundlers. - - key: other_tools.build_tools.question + - key: tools.build_tools.question t: Which build tools and bundlers have you used? - - key: other_tools.animation_libraries + - key: tools.animation_libraries t: Animation - # - key: other_tools.animation.description + # - key: tools.animation.description # t: Libraries to help manage animations and transitions. - - key: other_tools.animation_libraries.question + - key: tools.animation_libraries.question t: Which animation libraries have you used? - - key: other_tools.auth + - key: tools.auth t: Authentication - # - key: other_tools.auth.description + # - key: tools.auth.description # t: Libraries and services for managing authentication and accounts. - - key: other_tools.auth.question + - key: tools.auth.question t: Which libraries and services have you used to handle authentication? - - key: other_tools.data_visualization_libraries + - key: tools.data_visualization_libraries t: Data Visualization - # - key: other_tools.data_visualization.description + # - key: tools.data_visualization.description # t: Data visualization and graphics libraries. - - key: other_tools.data_visualization_libraries.question + - key: tools.data_visualization_libraries.question t: Which data visualization and graphics libraries have you used? - - key: other_tools.css_tools + - key: tools.css_tools t: CSS Tools & Libraries - # - key: other_tools.css_tools.description + # - key: tools.css_tools.description # t: CSS libraries, frameworks, and utilities you use to style your React app. - - key: other_tools.css_tools.question + - key: tools.css_tools.question t: Which libraries or frameworks have you used to style your React apps? - - key: other_tools.other_frontend_frameworks + - key: tools.other_frontend_frameworks t: Other Front-end Frameworks - # - key: other_tools.other_frontend_frameworks.description + # - key: tools.other_frontend_frameworks.description # t: > # Other front-end frameworks - - key: other_tools.other_frontend_frameworks.question + - key: tools.other_frontend_frameworks.question t: > Which other front-end frameworks have you used? - - key: other_tools.hosting + - key: tools.hosting t: Hosting Services - # - key: other_tools.hosting.description + # - key: tools.hosting.description # t: Services you use to host your React apps. - - key: other_tools.hosting.question + - key: tools.hosting.question t: Which of services have you used to host your React apps? - - key: other_tools.backend_language + - key: tools.backend_language t: Back-end Languages - - key: other_tools.backend_language.question + - key: tools.backend_language.question t: Which language(s) are your back-end apps written in? - - key: other_tools.other_services + - key: tools.other_services t: Other Services - - key: other_tools.other_services.question + - key: tools.other_services.question t: What other services have you used with your React apps? - - key: other_tools.validation + - key: tools.validation t: Schema & Validation Libraries - - key: other_tools.validation.question + - key: tools.validation.question t: Which libraries have you used for validating data against a schema? - - key: other_tools.ai_tools + - key: tools.ai_tools t: AI Tools - - key: other_tools.ai_tools.question + - key: tools.ai_tools.question t: What AI tools or services have you used to help you write React code? - - key: other_tools.renderers + - key: tools.renderers t: React Renderers - - key: other_tools.renderers.question + - key: tools.renderers.question t: Which libraries have you used to render React to different platforms or environments? - - key: other_tools.other_tools + - key: tools.other_tools t: Other Tools - - key: other_tools.other_tools.question + - key: tools.tools.question t: What other tools have you used to develop React apps? # CSS diff --git a/state_of_react_2023.yml b/state_of_react_2023.yml index 01e48b94cac..c256f41be0c 100644 --- a/state_of_react_2023.yml +++ b/state_of_react_2023.yml @@ -72,13 +72,11 @@ translations: - key: sections.user_info.description t: | - This year, **23,540** respondents took part in the survey. And in order - to help highlight different voices and surface deeper insights, we made a special - effort to provide new ways to break our data down. + **13,003** respondents took part in the first ever 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: sections.features.description t: | - This year we put special emphasis on identifying developer pain points with JavaScript. As one might expect, the **lack of native typing** and **browser inconsistencies** led their respective charts, each affecting nearly a third of developers. + 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: sections.libraries.description t: | @@ -100,6 +98,67 @@ translations: t: | This year's awards were dominated by one very specific project… how quickly will you guess what it is? + ########################################################################### + # Other Content + ########################################################################### + + - key: features.all_features + t: All Features + + - key: features.all_features.takeaway + 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. + + - key: features.reading_list.takeaway + t: > + **30%** of respondents added at least one item 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 + t: > + Among the most common React APIs, `forwardRef` was by far the one generating the most pain for developers, with `memo` a close second. Thankfully the React team is in the process of rolling out better alternatives to both. + + - key: features.hooks_items + t: Hooks Experience & Sentiment + - key: features.hooks_pain_points.takeaway + t: > + Unsurpringly, `useEffect` and `useCallback` were cited as the most problematice React hooks, in large part due to the management of dependency arrays. + + - key: features.new_apis_items + t: New APIs Experience & Sentiment + - key: features.new_apis_pain_points.takeaway + t: > + While React's ability to keep evolving and stay relevant over time is one of its best assets, it also comes at a cost and new APIs such as **Server Components** can definitely be tough to adopt. + + # component libraries + - key: tools.component_libraries_experience + t: Component Libraries Experience & Sentiment + - key: tools.component_libraries_experience.takeaway + 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. + + # state management + - key: tools.state_management_experience + t: State Management Experience & Sentiment + - key: tools.state_management_experience.takeaway + 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. + + # data loading + - key: tools.data_loading_experience + t: Data Loading Experience & Sentiment + - key: tools.data_loading_experience.takeaway + t: > + **TanStack Query** has been making waves for a while now, and it turns out its stellar reputation is reflected in the data. + + # back-end infrastructure + - key: tools.meta_frameworks_experience + t: Meta-Frameworks Experience & Sentiment + - key: tools.meta_frameworks_experience.takeaway + 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**. + ########################################################################### # Charts ###########################################################################