Skip to content
DevMeme
5722 of 7435
The Inevitable Evolution of React Hooks
Frameworks Post #6275, on Sep 26, 2024 in TG

The Inevitable Evolution of React Hooks

Why is this Frameworks meme funny?

Level 1: So Many Hooks

Imagine you have a special toolbox where every tool’s name starts with the word “use”. There’s useHammer, useWrench, useScrewdriver – and you need to grab these tools to fix things. Now, this funny meme says that in the future, you might even need a tool just to be allowed to use your other tools! 😂 It’s like if you had to use a key to unlock another key that actually starts your car. Sounds silly, right? The joke is showing a made-up piece of code with the word “use” repeated over and over, to make fun of how often that word appears in React’s toolbox. In simple terms, it’s laughing at the idea that there could be too many layers to do something simple. Even if you’re not a programmer, you can relate: it’s like having to flip a switch to turn on another switch to finally light your lamp. Too many steps for a simple task = funny. The meme exaggerates this, showing a pretend future where using something in React requires a “use”-tool for the “use”-tool. It’s a goofy way to say “sometimes we over-complicate things,” and anyone who’s ever had to follow needlessly complicated instructions can chuckle at that!

Level 2: Hook Naming Overload

Let’s break down the joke in simpler terms. React is a popular JavaScript library for building user interfaces, and it’s especially loved in the frontend world. In recent years, React introduced a feature called Hooks. Hooks are special functions (all conveniently starting with the word “use”) that let you “hook into” React’s state and lifecycle features without writing class components. For example, useState lets a component have state (some memory to remember values), and useEffect lets a component run some code when things change or on mount/unmount (like doing side effects such as fetching data or cleaning up timers). React’s official Hooks include many useSomething functions, and developers can also create custom hooks (basically their own functions that start with use and internally call other hooks).

Now, because of this naming convention, React code is full of use* names. It’s practically a signature of React Hooks. The meme is having fun with this fact by overloading the word “use” in a ridiculous way. In the image, the tweet says “React 20 be like:” and shows a pretend code snippet. Let’s interpret that snippet:

"use using"

using use = useUsing('use')
  • The first line "use using" is made to look like a directive or mode switch. It’s parodying "use strict", which is a real thing in JavaScript used to activate strict mode (a way to opt in to a safer, more restricted JavaScript). Here, "use using" is nonsense – there’s no such mode – but it immediately signals “we’re about to use a lot of ‘use’!” It sets the tongue-in-cheek tone that we’re in some imaginary “using mode”.

  • The third line using use = useUsing('use') is even crazier. In real JavaScript, using isn’t a keyword (at least not yet; some other languages like C# have a using keyword, but JS currently doesn’t in the context shown). The snippet looks like it’s declaring a variable named use using some kind of useUsing function with 'use' as an argument. Essentially, it’s layering the word “use” three times in one statement! It reads almost like an English sentence that got lost in a programming language: “using use equals useUsing of 'use'.” This line is a direct joke about React Hooks because of how repetitive the use prefix is.

So why is this funny to developers? Because it’s exaggerating a real trend. In modern React codebases, you might indeed have code that looks complex with nested hooks or custom hooks wrapping other hooks. For example, imagine you have a custom hook useFetchData that internally calls useState and useEffect to fetch something. Now you want another hook that uses useFetchData but adds a twist, so you write useAutoRefreshData that calls useFetchData inside... you see where this is going. You end up saying “use this, use that” a lot in code. This meme takes that to the extreme by joking that React version 20 (a future version we just humorously conjured up) would require you to even import a hook just to use other hooks – literally a hook for your hooks. That fake function name useUsing('use') suggests a hook called useUsing that you call with the argument 'use' to presumably... enable using? It’s totally absurd and that’s the point. It pokes fun at hook naming overload and how the word “use” is everywhere in React code.

The context here is also about framework evolution and developer fatigue. React is part of the ever-changing modern tech stack. Developers have seen libraries and frameworks become more sophisticated (and sometimes more complicated) over time – this is often jokingly referred to as framework churn or framework fatigue. Every few months there’s a new version or a new tool to learn. With React, Hooks were a big change that everyone had to adopt and learn around 2019. It simplified some parts of React but introduced its own new rules (like “Hooks can only be called at the top level of a component or another hook, not inside loops or conditionals” and “custom hook names must start with use”). These rules are important – they make Hooks work correctly – but they also form a sort of magic vocabulary newcomers must memorize. Now, seeing the abundance of useSomething everywhere, developers joke that maybe we’ve gone overboard. The meme is basically saying: “In the future, React’s going to be so hook-heavy that you’ll have hooks for everything, even for enabling other hooks. Where does it stop?” It’s a playful jab at the API design trend of tacking on new features (often with slightly verbose patterns) as frameworks mature.

To someone early in their coding journey, it might help to know that this is satire, not actual code you’d ever write. However, it’s rooted in things you’ll encounter as you dive into React or any evolving framework:

  • Hooks: functions like useState or useEffect that add specific capabilities to React components. They all have “use” in the name.
  • Custom Hooks: your own useSomething functions that call other hooks to share reusable logic. Teams often create many of these as their codebase grows.
  • API surface creep: over time, more and more functions get added to a library. React started with a small API; now it has a lot more (and you have to remember all those use names!). This isn’t unique to React – all major libraries grow over time to cover new needs – but it’s a common source of humor among developers because it can feel overwhelming.

The reference to "React 20" is just exaggeration — currently React is at version 18 (as of late 2024), and major versions don’t come out super often. By saying 20, the meme pretends we’re a couple of versions ahead in a hypothetical future, implying “imagine a future React so advanced (or bloated, haha) that...”. In that future, apparently, things have gotten a bit out of hand with hooks! It’s riffing on the idea of future framework bloat: the framework might accumulate increasingly elaborate features (like our silly useUsing hook for using hooks).

In summary, this meme is a tongue-in-cheek critique of React’s hook-centric design and the way new abstractions keep piling on. It’s relatable if you’ve felt a bit exhausted keeping track of all the new use* additions or if you’ve caught yourself writing a hook to wrap another hook. The humor comes from recognizing that kernel of truth (“we do have a lot of hooks now”) and laughing at the extreme slippery-slope version of it (“imagine if we needed a hook for using hooks – haha that’s crazy!”). It’s good-natured developer humor about the tools we use every day, combining equal parts TechHumor and RelatableDeveloperExperience.

Level 3: Hooks All The Way Down

At first glance, this meme drops experienced React devs into an absurd hook inception. The tweet from Ansub reads "React 20 be like:" and showcases a faux code snippet with multiple layers of use. In the code window, line 1 declares "use using", a cheeky twist on the classic JavaScript directive "use strict". Then, line 3 goes full meta: using use = useUsing('use'). This is clearly not real JavaScript – it’s a parody mashing together the use prefix convention of React hooks with a fictitious using keyword. To a seasoned developer, this immediately evokes the feeling of framework API bloat and naming overload. It’s a wink at how every new React feature seemingly comes with yet another useSomething hook, to the point where even using a hook might require its own hook!

Why is this so humorous to a veteran frontend engineer? Think about the evolution of React: we went from class components with lifecycle methods to a whole arsenal of Hooks (introduced in React 16.8). Now everything in React’s functional components is about “using” hooks – useState, useEffect, useContext, useReducer, useRef, useMemo, useCallback… the list keeps growing. Each of those APIs starts with the word “use”. It’s a deliberate naming convention (the Rules of Hooks actually require custom hooks to begin with "use" so that linters and the React runtime can identify them). As React has evolved (we’re at v18 as of 2024), the community has witnessed a proliferation of these use* hooks. Every new React release or RFC seems to add a new member to the hook family (looking at you, useTransition and useDeferredValue 😉). The meme exaggerates this trend: by React v20, maybe we’ll have so many hooks that we need a hook to manage our hooks – hence useUsing('use') as the ultimate recursive hook! This is a classic case of framework churn humor, where devs jokingly predict that the API surface will become ridiculously convoluted.

There’s a layer of industry inside-joke here about API design fatigue. Maintaining simplicity in a popular framework is hard; each new capability often introduces new functions or patterns. React’s hook-centric design was a radical change that simplified some things (no more class boilerplate!) but also complicated others (the infamous exhaustive dependency arrays, anyone?). Seasoned devs remember the shift from class components to functional components with hooks – it was exciting but also a bit traumatic. We refactored tons of code to adopt hooks, and then more hooks arrived. The meme satirically asks: Where does it end? Will we eventually wrap hooks inside hooks ad infinitum? It’s playing on the idea of “hooks all the way down”, an infinite regression joke that senior engineers find hilarious because it hits on a truth: sometimes our tools become overly self-referential and complex.

Real-world scenarios make this joke “too real.” Ever worked on a codebase where there’s a custom hook for everything? Need a feature – there’s a hook for that. Need to use that feature inside another hook – better write a hook wrapper. For example, you might have a useApi() hook for fetching data and a useApiWithPolling() that wraps useApi to add polling behavior. It’s normal abstraction, but taken to extremes it feels like bureaucracy: you end up with useX calling useY which itself calls useZ. The meme riffs on this by inventing useUsing, implying we even need a hook to handle the very act of using something. It’s poking fun at how modern frontend development can sometimes feel like over-engineering, where a simple task involves multiple layers of indirection. Seasoned developers also recall other frameworks and libraries that went through similar phases of feature creep. Today it’s React hooks; yesterday it was Angular’s multiple syntax rewrites or countless jQuery plugins. The reference to "React 20" implies a future where this pattern has run amok – a playful jibe at how quickly the ModernTechStack introduces new concepts and how devs frantically keep up, craving simplicity but drowning in new APIs.

Another angle that tickles the veteran funny bone is the contrast with older languages or patterns. The snippet’s using use = useUsing('use') faintly echoes patterns from other languages (like C#’s using statement for resource management, or Python’s context managers via with). It’s as if JavaScript/React has borrowed from every paradigm and ended up in a comically tangled syntax. The "use using" directive at the top mimics turning on some hypothetical strict hook mode – a nod to "use strict" which old-timers recognize as enabling a stricter JavaScript runtime. Combining that with useUsing forms a nerdy double pun. It says: “Not only is everything a hook now, we even have a hook to ensure we’re using hooks correctly!” This hits on the RelatableDeveloperExperience of grappling with evolving best practices: first you learn one way to do things, then a new version comes out and you have to relearn using a slightly different approach (often prefixed with “use” 😅). The humor also lies in the implied absurdity – even though Hooks greatly improved React, loading too many abstractions on top can circle back and become ridiculously complex. It resonates with any senior dev who’s joked, “What’s next, React? A useUse hook?” In fact, the community has half-jokingly speculated about a base hook called use() possibly emerging (especially with React’s experimental concurrent features and suspense for data fetching, where you might see something like use(resource) to read async data). So the meme isn’t just pure nonsense – it’s riffing on real trends, just cranking the dial to 11 for comedic effect.

Ultimately, the meme’s punchline lands because of the shared understanding among developers that frameworks tend to grow and accumulate “magic.” React started with a simple component model and now, several years later, we’re juggling dozens of hook functions. The phrase “every hook now needs its own hook wrapper” in the title nails this irony. It’s both a light-hearted roast and an affectionate eye-roll at the tool we use daily. A senior React dev chuckles because they can imagine being at a meeting in 2028 discussing the new useUsing API with a straight face. It’s satire about our industry’s habit of solving complexity with another layer of abstraction – until one day you step back and realize how comically convoluted it has become. In summary, this level of the joke delivers a rich blend of FrontendHumor and commentary on FrameworkChurn. It’s funny because it’s an exaggeration grounded in truth: we really do prefix everything with "use" now, and maybe, just maybe, React 20 will introduce a hook to rule them all!

Description

This image is a screenshot of a tweet from the user Ansub (@justansub). The tweet's text reads, 'React 20 be like:'. Below this caption is a stylized image of a code editor with a dark theme. The code snippet contains two lines: the first is a string literal, '"use using"', which likely represents a new directive similar to '"use strict"' or '"use client"'. The second line is a nonsensical piece of code: 'using use = useUsing('use')'. This syntax is a satirical exaggeration of the React framework's hook-based architecture, where functions are prefixed with the word 'use' (e.g., useState, useEffect). The meme humorously projects this convention into the future, suggesting that 'React 20' will have a convoluted, meta, and almost tautological syntax. It's a commentary on framework complexity and the potential for naming conventions to become absurd when taken to their logical extreme, a joke that deeply resonates with frontend developers who have followed React's evolution

Comments

16
Anonymous ★ Top Pick This isn't a joke, it's the inevitable outcome of the RFC process for adding explicit resource management to React, where the naming convention was the only thing everyone could agree on
  1. Anonymous ★ Top Pick

    This isn't a joke, it's the inevitable outcome of the RFC process for adding explicit resource management to React, where the naming convention was the only thing everyone could agree on

  2. Anonymous

    At this rate, React 20’s RFC will propose `useUse` - and the linter will yell if you forget to `useUsing(use)` before brunch

  3. Anonymous

    At this rate, React 30 will just be a Lisp dialect where every function is a variation of 'use' and we'll need a PhD in category theory just to understand why useState doesn't actually manage state anymore

  4. Anonymous

    When React's hook naming convention becomes so meta that you need a hook to use hooks, you've achieved peak framework abstraction. This is what happens when 'convention over configuration' meets infinite recursion - eventually you'll need useUseUsingUseEffect() just to update a counter. The real question is: will React 20's compiler optimize this into a single 'u' or will we finally admit that maybe, just maybe, we've taken the 'use' prefix a bit too seriously?

  5. Anonymous

    In React 20, a “using use = useUsing('use')” block disposes your hook-of-hooks; ESLint’s new Rules of Using will finally explain those 17 unexpected re-renders

  6. Anonymous

    React 20's use(): finally breaking 'top-level only' hooks - with turtles all the way down

  7. Anonymous

    At this rate React 20 won’t need imports - just prepend “use” and hope the Rules of Hooks can negotiate ownership with TypeScript’s “using” before hydration

  8. @FirokOtaku 1y

    Future Java be like: class FactoryFactory extends AbstractFactoryFactory<FactoryFactory> implements IFactory { final FactoryFactoryMeta meta; /** * @version 0.2.0 * @apiNote 0.2.0 fixed typo issue */ protected FactoryFactory(FactoryFactoryMeta meta) { this.meta = meta; } @Override Factory buildFactory() { return new Factory(meta); } }

    1. @trainzman 1y

      Future C#:

      1. @azizhakberdiev 1y

        use of new keyword is deprecated Use malloc, calloc and realloc instead /s

    2. @trainzman 1y

      More like Future Java be like

      1. @seekonelinesky 1y

        Spring: do not expect for the future, I am doing this right now

        1. @TheFloofyFloof 1y

          @Bean

    3. @Diotost 1y

      It won't work. There is a typo. Facotry instead of Factory

  9. @Diotost 1y

    Was a typo.

    1. @FirokOtaku 1y

      fixed.

Use J and K for navigation