Hacker News Reader

Comment by Uehreka | Hacker News Reader

> "you call a library, but a framework calls you."

This is why I don't like when people say "React isn't a framework, it's just a library". Almost all of my React code is "called by React" with the one exception being `ReactDOM.Render()` (I don't count that since every other framework has some analogous "bootstrap" instruction).

Now if folks want to argue that React only handles the "view layer" without providing a built in state management solution, that's absolutely true (and considered a separation-of-concerns positive by a lot of people including me). But I feel like so many folks just boil this down to "React isn't a framework, it's just a library" and then use that as a segue to negatively comparing it with their chosen tool.

View on HN

> Almost all of my React code is "called by React" with the one exception being `ReactDOM.Render()`

It only feels this way because your calls to React are hidden away behind JSX. I believe this is also why you can't write any JSX without importing the React module first.

If you've ever had the "pleasure" of writing React with plain React.createElement() calls (what your JSX ultimately gets transpiled to) then I think you would more likely agree with the notion that React is "just a library".

Create-react-app is much more akin to a framework in that it bootstraps an environment for you where you don't have to do any of the things that make React feel like simply a fancy library for rendering HTML.

Great resource for anyone interested in this. It’s really enlightening: https://pomb.us/build-your-own-react/

> If you've ever had the "pleasure" of writing React with plain React.createElement() calls (what your JSX ultimately gets transpiled to) then I think you would more likely agree with the notion that React is "just a library".

I'm not sure why someone would unless you're strictly writing static JSX with no components whatsoever as some sort of weird replacement for just writing the equivalent static HTML. The minute you write a `render` or lifecycle method, React is now calling you. Not to mention stuff like Suspense asking you to throw a Promise to render from latest render cache.

I think something like Crank.js[0] is more a view library since it puts all the nuts and bolts into userland.

[0]https://crank.js.org/

You use React APIs to do everything you would normally do with React. You use the API directly if you don't have a build step for your web app and you cant or don't want to add one. Since React is indeed simply a library with an API, you can progressively integrate React into an existing web app in this way (a big selling point in the early days that people have sensibly forgotten by now). You couldn't progressively integrate a traditional framework like Django for example.

Lifecycle methods like render, componentWillMount, etc are just callbacks that get fired when you render you a component. I don't think any library is immediately graduated to the class of "framework" the moment a callback is added.

> You couldn't progressively integrate a traditional framework like Django for example.

I dunno here, is Rails a server application library because I can progressively integrate the different components of its total API, e.g. first use ActiveRecord, then adopt rails-api for the frontend, then adopt ActiveView and Turbolinks for the end-user frontend? Or is there different idea of framework at work here?

> Lifecycle methods like render, componentWillMount, etc are just callbacks that get fired when you render you a component. I don't think any library is immediately graduated to the class of "framework" the moment a callback is added.

But I don't write the code that says when they're called. Backbone is more of a library, for example, since it lets me do all that and it can be progressively integrated into an app too (I can just use models, I can just the views, etc). I mean thats part of why people ran to Ember and Angular when they appeared, they didn't feel like doing all that.

Also see Crank.js: you can emulate React's Component API in Crank, but the reverse is not true. If I'm not writing the code that "turns the gears" per se, then to me I'm using a framework. That framework might have a small API surface, it might have a large API surface. That's how I see it at least. A framework to me is defined by a certain threshold of abstraction.

This is an async task library because I can opt-in and out of, as well as control, or simply replace, the scheduler[0]

[0]https://github.com/mitranim/posterus

>I dunno here, is Rails a server application library because I can progressively integrate the different components of its total API

I'm not familiar with Rails but it sounds like the individual components you list can be used independently of your traditional Rails web server so that would indeed make them libraries. I'm not sure that makes the entirety of Rails a library. Could you rewrite an endpoint with Rails within another Ruby web framework (I don't know of any) without needing to run two servers? If so, Rails is a library.

> But I don't write the code that says when they're called.

That's simply not true. Every lifecycle method is the direct result of a specific programmatic call. Whether it be a render (ReactDOM.render), prop change (also ReactDOM.render), or state change (setState). If you don't setup the logic to call these APIs appropriately no callback will ever be fired. It only feels like React is firing these events for you because these API calls are likely hidden behind JSX and hooks and they are also asynchronous by virtue of React having to manipulate the DOM.

> If I'm not writing the code that "turns the gears" per se, then to me I'm using a framework.

The only gear you don't get to control is specifically how the DOM is manipulated. Everything else is in your control when using React.

> I dunno here, is Rails a server application library because I can progressively integrate the different components of its total API, e.g. first use ActiveRecord, then adopt rails-api for the frontend, then adopt ActiveView and Turbolinks for the end-user frontend? Or is there different idea of framework at work here?

I think you misunderstood parent comment. Progressively integrate here means: you have a web page (facebook.com), you want to replace a part of it with react (chat function), you rewrite just that portion of the webpage in react.

You can't get a Sinatra application and replace just one route with rails. Well, you can use ActiveController, which is just an opinionated wrapper around Rack with a lot of sugar, but that wouldn't be rails and you won't get any rails benefits of doing that.

yes, well if I didn't use most of the built in functionality of a framework I suppose it would be a lot more like using a library.

Support for JSX is not built into React. React is simply a JS library and JSX is not valid JS. So if you add React to a web page, and attempt to write logic with JSX, you will get syntax errors.

No, it's literally the case that JSX compiles into (indirect) calls to your own functions. It's not a magic 'framework' that calls your code when you use JSX, it's... your code.

When you write

   return <MyFunction foo={bar}/>

that gets turned into

   return React.createElement(MyFunction, { foo: bar }, [])

Which returns a refreshable wrapper round the result of calling your function.

It's really a reactive-functional type system, rather than a framework - with a syntactic sugar that makes it easy to generate a reactive wrapper round a function.

Then you take the result of passing all your functions into that syntactic wrapper and hand it to ReactDOM to have it synchronize it with the DOM.

React transcends the framework/library discussion because it really isn't either. It's a higher-ordered type factory.

React is a library that should have been a framework.

Literally everyone has to cobble some n-factor framework together and given the amount of inexperience out there, what results is a damn nightmare.

React solving the state problem natively would have made it an industry game changer. What we have is an industry mess.

> React is a library that should have been a framework.

React is a library that powers several different frameworks, as well as lets people use it without those frameworks. If one size fits all, answer-for-everything frameworks were the optimal solution for all problems, Angular would own the world and we wouldn't need React.

Google rug pulled angular, I know at least one very large company that pulled all Google tech from their stack over angular 1 -> 2.

React really isn't the thing people have decided is the optimal solution, jsx and keeping presentation tightly coupled to business logic is.

What is see with react is constant attempts to work against that ideal.

> React really isn't the thing people have decided is the optimal solution

My point is there is no one thing people have decided is the optimal solution. React is an element of snow me of (several different) things people have found is optimal for some problems, and not part of others.

> jsx and keeping presentation tightly coupled to business logic is.

JSX is more generally than React is, which is why many not-React solutions use React, too, though even that is far from universal. Tight coupling between business logic and presentation is, OTOH, far less generally what people have decided is optimal.

I've seen entire apps written as React components/hooks, the whole thing, no redux/mobx/etc managing state above the level of necessary local UI state. React markets itself as just a library but the truth is people tend to go all in precisely because there's too much pressure to research a whole stack for yourself.

Those are likely some really solid applications as a result.

In my experience redux just enables developers to sprinkle global state everywhere which makes tests a pain to write and code hard to debug.

Angular Vue and Svelte fit your description and none of them are more popular than React, I guess people have made their choice.

It's an open question whether React succeeded because of technical advantages or because of Facebook's initial support and the job market creating its own dynamic (people go where the jobs are).

I think React's original goal was to be a library, but the community made it a framework, because they could not conceive of any other way to operate.

Less that they couldn’t conceive of any other way, but more so we are slaves to the vdom diffs. That’s what we signed up for, and boy did we get trapped. Go ahead, put a little jquery into your React app, or that animation library that looks cool, you’ll blow up the whole point of React.

Sorry, you will have to do things React’s way until the end of time if you want your rendering to be optimal. That means whatever it means, hooks, suspense, fibers, context, so on.

A library means I get to plug in other stuff without totally crippling another library, as React claims it is.

Nothing wrong with React, just become the framework you are and provide the built in solutions.

Think of it this way, imagine the React team made curl. Now they say you can curl anything. So now you say, ‘ok, I want to curl this’ and they respond:

‘Oooo, I don’t know about that, that’s gonna mess up all the curl internal optimizations, hmmm, no no, you SHOULDNT be curling that’

And then we all walk away going ‘oh’, silently. Checkmate, hoodwinked.

Hmm, I don’t really agree on this one. Just a day ago I’ve added a totally not vdom, stateful component that was mutating DOM and adding nodes on it’s own to fix performance problems with critical part of the app that required instant feedback to user typing.

React was not bothered at all. From the start there were ways to escape React model in components and integrate components into other frameworks. Been there, done that, it was never a huge deal.

Can you describe what you did? Breaking out of React for rendering means you are in deep shit. In fact, I’d love to see the hoops you jumped through, which I’m certain you will brush away as ‘not a big deal’.

But I am an American, so I won’t put up with any inconvenience and don’t consider it virtuous to do so (we fought a war over a tea tax after all).

But I’ll take a wild guess:

A bunch of useRefs? I’m excited to hear all of this.

React only re-renders a component if the state changes, the props change, or a parent component re-renders. In my app, I only have one component where I needed to break out of the vdom, and none of the parent tree ever re-rendered (except when navigating to a new page, which correctly tears down the component), so it was as simple as just one useRef to grab a reference and one useEffect to pass it to my other code after the component rendered.

A pretty straightforward pattern here (and one that I actually just implemented with no hiccups for a non-React animation library) looks like:

    import { useEffect, useRef } from 'react';
    import { Controller } from 'some-animation-library';

    const SomeWrapperComponent = ({ options }) => {
      const elementRef = useRef(null)
      const controllerRef = useRef(null)

      useEffect(() => {
        if (!elementRef.current) {
          return () => {}
        }

        if (!controllerRef.current) {
          controllerRef.current = new Controller(elementRef.current, options)
        } else {
          controllerRef.current.setOptions(options)
        }

        return () => {
          controllerRef.current.doSomeCleanup()
        }
      }, [options])

      return <div ref={elementRef}></div>
    }

Thanks, that’s exactly the simplicity I wanted you to share, you did good.

The most recent thing was the typing app where we had to change style if each character after user typed it. With long texts (10k of characters) performance of tree diffing was not acceptable (especially in Safari) so we replaced whole text component with manually managed DOM and were mutating nodes directly.

I’ve been using React for quite some time (started with version 0.11 or something) and had to integrate quite a few libraries on my own (stuff like OpenLayers for maps, etc) and it also worked pretty well. Also made few apps that had only few widgets (search UI, calendar, etc). It usually worked quite well.

Mixing React with non React is quite easy. You only need to encapsulate it - keep all non vdom stuff in one component and never escape single DOM node.

Yeah, that's been my experience, too, for instance in one of my toy projects dropping a rotjs game display into a React app.

And with hooks that's become even more true, there's now a distinction between React functions and regular JavaScript functions, and you can only call a React function from another React function.

Not entirely true. Hookless function components can be called as regular old functions just fine

It stops being a library when you structure your entire codebase around it.

Or any part of your codebase for that matter

It used to try to be like that. Only calling setState re-renders things. And you control state and when to render.

Until the hooks introduced.

Now it also want to handles all the state and timing for update. And you are no longer able to call from outside or decides when to render (in a simple manner, as there are still workarounds).

> > "you call a library, but a framework calls you."

> This is why I don't like when people say "React isn't a framework, it's just a library"

Eh, this is just a breakdown in the "framework calls you" heuristic. It's still a reasonable heuristic, but it doesn't completely describe all distinctions people make between frameworks and libraries.

The distinction missing from the heuristic is the overall scope of the software project relative to other popular software projects in the same area. When people say "React isn't a framework, it's just a library" they're not saying much about the coding style one uses while using React. They're just comparing the overall scope of React to some of its close competitors (like Ember and Angular).

> "React isn't a framework, it's just a library"

There may not be a clear line between framework and library, but as written in the homepage of reactjs.org, it claims itself: React - "A JavaScript library for building user interfaces"

Reply on news.ycombinator.com