We React to State of React Survey

The "State of React 2023" survey reveals significant insights into the current landscape of React development. The discussion, featuring Scott Tolinski, highlights key pain points like API complexities, the burden of state management, and the challenges of new APIs such as React Server Components. Popular libraries like TanStack Query and tools like Next.js are praised, while older solutions like Redux and Apollo Client see declining favor due to their complexity. Hosting preferences show Vercel and AWS leading, while TypeScript dominates backend languages. The episode underscores the evolving nature of React, emphasizing the community's shift towards newer, more efficient tools and practices.

• Introduction to the Survey:
  • Conducted by the same team behind State of JS and other tech surveys.
  • Provides insights into the current landscape of React development.
  • Highlights key changes and trends within the React ecosystem.

"Today we have the state of React 2023... a survey from the folks behind State of everything probably state of JS."

• Relevance to React Developers:
  • Most React developers have experienced significant changes in the React world.
  • The survey serves as a temperature check for the current state and evolution of React.

"A lot of you are React developers... I feel like there's a lot changing in React World right now."

• Common Reasons for Moving Away from React:
  • API complexity and pain points.
  • Ecosystem fatigue.
  • Browser standards and simplicity in other frameworks like Svelte.
  • State management and form handling complexities.

"There's API pain points, there's... ecosystem fatigue... browser standards or it Svelte is a little bit more simple."

• Forward Ref:
  • A significant pain point, especially when bridging vanilla and React APIs.
  • Often regretted when used due to its complexity.

"Oddly enough, the first biggest pain point on here is one that I felt like I didn't have to use that much in React but every time I did use it I regretted the fact that I had to use it and that was forward ref."

• Memo and Use Memo:
  • Memo helps skip rendering of unchanged components.
  • Use memo is more commonly used.
  • Both add mental overhead regarding component re-renders and performance.

"Memo allows you to skip rendering of a component when its props are unchanged... that kind of mental overhead does cause quite a bit of disturbance."

• Context API:
  • Issues with excessive renderings.
  • Complexity in determining the placement of context providers.

"Having to like guess where you want to put your context provider so that you don't put it too high and it doesn't give you too many renderings down the tree."

• Strict Mode:
  • Causes components to run twice in development to ensure consistent outputs.
  • Leads to confusion with double console logs.

"Strict mode will run your components twice... it's really confusing I kind of wish there's got to be a better way around that type of thing."

• Double Rendering:
  • Often caused by components loading data and setting states, leading to multiple renders.

"You load a component that component will then load in some data... then it will rerender again because now you've set up your data."

• State Management:
  • Numerous libraries available, with varying levels of complexity.
  • Zustan is highlighted as a clean and effective state management library.

"There are a lot of great State Management libraries out there... in my mind the cleanest way to write state in React."

• Use Effect:
  • Causes confusion with dependency arrays and render control.
  • Compiled languages can handle these dependencies more efficiently.

"Use effect I think causes a lot of people who aren't familiar with how this stuff works to be... potentially getting themselves into a situation where either their code isn't rendering when they would expect it to or it's rendering too many times."

• Dependency Arrays:
  • Closely related to use effect, managing dependencies can be challenging.

"Dependency arrays use effect those are very much in the same regard."

• Use Callback and Use Memo:
  • Both are used to control function and data recreation on re-renders.
  • Aim to reduce unnecessary renders and improve performance.

"Use callback and used memo are all about controlling how when things render what kind of implications that has."

• React Server Components:
  • Despite the potential benefits, they require developers to rethink their stacks.
  • Seen as a complex addition to the React ecosystem.

"React server components is number one and I think that that is like not a surprise to me despite the fact that I think the react server components API is really great."

• State Management Libraries:
  • Zustand is praised for its simplicity and effectiveness.
  • Can be used seamlessly with vanilla JavaScript and React.

"I used Zoo stand it's amazing because I can use the Zoo stand react store in vanilla JavaScript without any of the react APIs."

• The State of React 2023 survey highlights significant pain points and areas of complexity within the React ecosystem.
• Key issues include API pain points, hooks, and new API complexities.
• Despite these challenges, effective solutions and libraries like Zustand offer promising ways to manage state and improve developer experience.

• Web development often requires adopting new thinking methodologies and architectural approaches.

"It's a whole new thinking methodology, you know, architecture."

• Adopting new frameworks like Quick or React server components can be challenging due to their novel approaches.

"Quick not taking off as much as it should be... it requires a bit more of a thinking approach that's different."

• React server components can simplify state management and reduce the need for hooks, but they come with a learning curve.

"React server components will greatly improve and get rid of a lot of the pain points... however, you're going to have to learn them."

• The Taint API is a lesser-known API with an unfortunate name that may affect its reception.

"Nobody was like let's reconsider the word taint for the taint API."

• Taint refers to the concept of damaging or spoiling the quality of something.

"Taint is to damage or spoil the quality."

• User sentiment towards libraries varies, with some libraries being more beloved than others.

"Nextjs has the most popular sentiment probably because it's the largest although it does have a pretty large negative as well."

• TanStack Query is highly appreciated for its functionality and low dislike ratio.

"TanStack Query... such a tiny percent of people dislike it compared to the Nextjs thing."

• JoTai is an atomic approach to global React state management, filling a niche similar to Recoil.

"JoTai is another State Management Library... an atomic approach to Global React state."

• Apollo Client and Redux have seen a decline in usage due to their complexity.

"Apollo Client was the show in town... it's also like in number 16 in the list of things that people are talking about."

"Redux just like Apollo has a higher negative... it was way overly complex for the majority of things that people were trying to use it for."

• Complex technologies often see a decline in sentiment as users realize the overhead involved.

"People have realized oh that's a lot of complexity... we swung so hard from you have your database you have your rest API you have a GraphQL on top of it."

• The initial excitement of using new tech can fade as the complexities become apparent.

"There's so many complex things after a couple years of usage just go all negative... we build these really hard complex monsters that are fun at first."

• Libraries with a good positive sentiment and a large "never used" segment are worth exploring.

"Redwood has probably the biggest middle... 12% positive."

• Astro and TRPC have seen significant positive sentiment and are becoming more popular.

"Astro's shot up in the last year or so... tons of people are loving it."

• Libraries like React Bootstrap and Ant Design have a high negative sentiment due to various reasons like bloat and poor customization.

"React Bootstrap... typescript support is poor, server component support is lots of bloat."

• Material UI is the most used component library, despite some users preferring others.

"Material UI is number one for the most people who have used material UI out of all of these."

• React Arya is noted for accessibility but has mixed reviews on its functionality.

"React Arya... accessibility stuff always piques my interest."

• Newer libraries like Mantine are gaining attention for their well-designed components and usability.

"Mantine... seems like there's a lot of useful components, a lot of nice form components."

• Users often choose libraries based on ease of use, customization options, and community support.

"Sometimes when they come with really nice pre-made CSS then everyone starts getting used to it."

• The sentiment towards a library can change over time as more users adopt it and share their experiences.

"I bet we're going to start we're going to see that with Shad Sienna in a couple of years."

These notes encapsulate the key ideas and discussions from the transcript, providing a comprehensive overview of the main themes and topics covered.

• Details Element: Introduced in Chrome since version 12 (2011), useful for creating accordions.
  • Usage: Can be used to open multiple sections simultaneously or restrict to one open section at a time.
  • Animation: Hard to animate but possible with web animations API.

"The details element has been in Chrome since 2011 Chrome version 12 pretty much since the launch of Chrome."

• The details element has been supported in Chrome since its early versions, making it a long-standing feature.

"On details, you give it a name, and then you give another one with the same name; only one of those can be open at the same time."

• You can control the exclusivity of open sections by assigning names to details elements.

• Popular Libraries: React Spring and React Motion are highly used.
  • CSS Usage: Despite the popularity of JavaScript libraries, 39% of respondents still use CSS for animations.

"Animation frame or motion coming in at number one react spring number two react motion."

• React Spring and React Motion are the top animation libraries used in the community.

• D3 and Its Derivatives: D3 is powerful but complex; libraries like Neo and Recharts simplify its use.
  • SVG vs. Canvas: D3 uses SVG, making it easier to style and interact with using CSS.

"Neo is D3 based and makes it so much easier to work with D3."

• Neo simplifies the complexities of D3, making it more user-friendly.

"D3 is SVG based, which is better because you can use CSS to change the color of things and listen for click elements."

• SVG allows for easier styling and interaction compared to canvas.

• Tailwind CSS: Widely used, with 67% adoption.
  • Styled Components: Still popular but facing competition from other solutions.
  • CSS-in-JS: New solutions compile at build time, reducing runtime overhead.

"67% of people using Tailwind but five less are using styled components."

• Tailwind CSS is slightly more popular than styled components among respondents.

"Styled components had a couple benefits: scoping CSS to a specific component and using JavaScript inside CSS."

• Styled components provide scoped CSS and the ability to use JavaScript within styles.

• Create React App: Most used for initial setups but not for full applications.
  • Astro: Preferred for its minimal JavaScript payload and familiar paradigms.
  • Other Frameworks: SvelteKit, Quick, and Solid are also notable mentions.

"91% of people have used create react app, but I'd be surprised if people were shipping a lot of things on it."

• Create React App is commonly used for starting projects but not for full-scale applications.

"Astro is my favorite of the bunch of meta frameworks for React because it focuses on not shipping a lot of JavaScript."

• Astro is preferred for its efficiency in minimizing JavaScript delivery.

• Webpack: Still dominant but many users may not directly interact with its configuration.
  • Other Tools: Vite, ESBuild, and Rollup are also popular choices.

"89% of people have used Webpack. I guess that's also like 'have you used it?'"

• Webpack remains widely used, even if indirectly through frameworks like Next.js.

"Vite number two, ESBuild, Rollup, TSC, Turbo Pack, Parcel."

• Vite and ESBuild are notable alternatives to Webpack.

• Popular Platforms: Vercel, AWS, GitHub Pages, and Netlify are top choices.
  • Heroku: Surprisingly still in use by many.
  • Future Predictions: Hetzner expected to rise in popularity.

"Heroku has half the respondents of Vercel, which is way more than I would have thought."

• Despite newer platforms, Heroku still maintains a significant user base.

"My prediction for 2024 and beyond is that Hetzner will go from 16 to top 10."

• Hetzner is anticipated to become a more popular hosting choice due to its cost-effectiveness.

• Languages: JavaScript and TypeScript are the primary languages for backends in React projects.
  • Other Services: Firebase, Prisma, and Sentry are commonly used.

"JavaScript as a backend language is surprising to me, but TypeScript is the number one."

• JavaScript and TypeScript are the leading choices for backend languages in the React ecosystem.

"Firebase, Prisma, and Sentry are the top three services used by respondents."

• Firebase, Prisma, and Sentry are popular backend services among developers.

• JavaScript and Python are among the top programming languages.
• PHP ranks fourth, showing continued usage despite newer languages.
• Ruby is still relevant, holding the eighth position.
• .NET is also significant, ranking fifth.

"Interesting to see that number three though JavaScript y uh PHP that's number four number four."

• JavaScript and PHP maintain high popularity and usage.

"Ruby uh number eight is Ruby wowow python uh python number three that's number three good."

• Python is highly popular, holding the third position, while Ruby is still in the top ten.

"So number number five isnet which we just got a p question asking us to do a show on net."

• .NET is a notable language, ranking fifth, indicating steady use and interest.

• Popular libraries include React, Zustand, Redux, XState, Recoil, and MobX.
• Redux Toolkit is highlighted for its efficient development features.

"Top 10 State Management libraries that are using number one youate obviously the biggest one zustan joai you just told me how to say that jawai yeah joai Redux xate a Redux toolkit batteries included set for efficient Redux development."

• React is the most used state management library, followed by Zustand and Redux.

"I don't think I've ever heard of Redux toolkit it's been around yeah nothing new oh man it's been around the days of Redux."

• Redux Toolkit has been around since the early days of Redux but remains relevant.

• React Query is the most popular data loading tool, surpassing Fetch.
• Other notable tools include TRPC and SWR.

"The top data loading F tack query by far coming above fetch then trpc SWR SWR was the one next ja was was pushing for quite a while."

• React Query is preferred for data loading, indicating its efficiency and popularity.

"People like tanet query the most."

• React Query is favored by users for its functionality and ease of use.

• Jest remains the most popular testing library.
• React Testing Library and Storybook are also widely used.

"Tools testing libraries what do you think about this jest still coming in number one react testing library or just testing library from KY dods coming in number two storybook Cyprus playwright vest."

• Jest is the leading testing library, with React Testing Library and Storybook following.

"My favorite of the bunch are the end to ones where you have like Cypress or playright are my favorite."

• End-to-end testing tools like Cypress and Playwright are favored for comprehensive testing.

• React DOM is the most popular renderer.
• React Native is widely used, especially for Android development.

"React renderers oh this is cool where are you rendering your react react Dom the web probably the most popular so no surprise that react native is number two."

• React DOM is primarily used for web applications, while React Native is significant for mobile.

"More people are building for react n for Android than iOS."

• Android development using React Native is more common than iOS development.

• Single Page Applications (SPAs) are the most common pattern.
• Server-side rendering (SSR) and static site generation (SSG) are also prevalent.

"Something useful uh or interesting is under the usage is application patterns shows that 86% of respondents are writing single page applications."

• SPAs dominate, with a significant majority of developers using this pattern.

"63 are writing serers side rendered applications 50% are writing static sites."

• SSR and static sites are also widely used, reflecting diverse application architecture choices.

• React 18 has a high adoption rate, showing successful upgrade paths.
• Newer versions do not impose significant breaking changes, facilitating easier upgrades.

"69% of respondents are on react 18 which I think says a lot about react's upgrade path."

• The high adoption of React 18 indicates effective version management and upgrade paths.

"Even if you're on newer versions of react that doesn't necessarily mean you're having to use all the new stuff to just have it working."

• Upgrading to newer React versions is manageable without needing to adopt all new features.

• Syntax podcast is highly popular among listeners.

"Number one podcast syntax thanks everybody for continuing to vote for us we appreciate you."

• The Syntax podcast enjoys strong support and high listener engagement.

• Thermacell mosquito repellent is recommended for effective mosquito control.
• Nerf guns are highlighted as a fun family activity, with considerations on age appropriateness.

"I'm going to sick pick this thermacell mosquito repellent thing it's like a little tube and you put you put these little fuel cells into them."

• Thermacell is effective for keeping mosquitoes away, especially in outdoor settings.

"We have recently gotten into Nerf guns at our house because I go to a lot of garage sales and I never realized this before but every single garage sale has a thousands of Nerf guns."

• Nerf guns provide enjoyable family activities, with safety considerations discussed.