On: You probably don't need a single-page app

[s_y_n_t_a_x]

You don't get much simpler than Redux.

And React by itself is very simple, you don't even have to use JSX. It's a great templating library, with great documentation and a huge community.

[petilon → s_y_n_t_a_x]

>You don't get much simpler than Redux.

Not true. With Redux you write reams of actions and reducers and other such unnecessary crap in the name of state management, when in fact most client apps don't have state, all they do is fetch data from the server, display it, send updates back to the server.

React used to be a simple lib, now it is getting more and more complicated. Look at the libs I mentioned they are way simpler.

>you don't even have to use JSX

But JSX is the good part of React. You get compile-time checking of your expressions if you use TypeScript and you get syntax coloring, intellisense etc for both HTML and JavaScript.

[s_y_n_t_a_x → petilon]

If you don't need state, don't include it. That's the beauty of React. But as far as a state management lib goes, Redux is one of the simplest, go look at the source.

I agree JSX is very nice. It's one of the best features of React, and another reason React is a great templating lib. My point was you don't need it. React does a lot of other nice things like browser compatibility, event management. If you want a smaller implementation, use preact or some other template lib.

When dealing with React and Redux you are just dealing with functions. You could do everything in pure functions.

[petilon → s_y_n_t_a_x]

React requires too much incantations, rituals and ceremony. You have props and state, context, error boundaries, refs, keys, you have to figure out where state should live, etc. You make a component that contains state. Then you want to use it in a component hierarchy -- now the component is supposed to have props not state. You make a component that has props, now you want to use it at the top level -- now the component is supposed to have state, or have an otherwise unnecessary wrapper.

You don't have to deal with any of that crap.

The best part of React is DOM diffing and incremental screen update. Obviously this is only useful if your application needs to update screens it previously rendered. In fact I'd argue that React is only useful if you need to incrementally update complex screens, because simple screens can be re-rendered completely and no one will know the difference. Very few applications need to incrementally update complex screens. If your application doesn't have this need you can use simpler technologies that don't have the same "Care and feed" requirements of React, such as UIBuilder: https://github.com/wisercoder/uibuilder

[s_y_n_t_a_x → petilon]

You don't have to deal with any of that crap when you deal with react. Just write pure functions as components. The arguments are the props.

[petilon → s_y_n_t_a_x]

Then you aren't benefiting from React at all. The point of React is DOM diffing, which you trigger using setState method.

[crooked-v → petilon]

You're dramatically overexaggerating the complications of global state handling in Redux. For a simple app, you could just use the useState hook, and pass the state-setting callback down into children components:

    import React, { useState } from 'react';

    export const SetterButton = ({ children, ...rest }) => (
      <button type="button" {...rest}>{children}</button>
    )

    export const BoxComponent = ({ label }) => {
      const [value, setValue] = useState(0);

      return (
        <div style={border: '1px solid black'}>
          {label}: {value}
          <SetterButton onClick={() => setValue(value + 1)}>+1</SetterButton>
        </div>
      );
    };

Or for a bigger app with many nested components, you can use context:

    import React, { useState } from 'react';

    export const ValueContext = React.createContext();

    export const SubComponent = () => (
      <div>
        <p>
          Here's a value:
          <ValueContext.Consumer>
            {({ value }) => value}
          </ValueContext.Consumer>
        </p>
        <p>
          Here's a button:
          <ValueContext.Consumer>
            {({ setValue, value }) => <button type="button" onClick={() => setValue(value + 1)}>+1</button>}
          </ValueContext.Consumer>
        </p>
      </div>
    )

    export const App = () => {
      const [value, setValue] = useState();

      return (
        <ValueContext.Provider value={{ value, setValue }}>
          Some other stuff goes here.
          <SubComponent></SubComponent>
        </ValueContext.Provider>
      );
    }

None of this takes a ton of thought. Just make a file for contexts exports and a root level component with any Providers.

[s_y_n_t_a_x → petilon]

When you change the props of a component it re-renders.

Just because you use pure functions doesn't mean you don't get DOM diffing, that's silly.

[s_y_n_t_a_x → s_y_n_t_a_x]

To reply to your last comment, each project is different, and if you just want a few things on a page, sure use a small lib like what you suggested. But at a certain point you start reinventing the wheel and no other developer will be able to jump into it. You need a framework for large projects with a team and potential future members.

React isn't complicated, you're making out to be.

[petilon → s_y_n_t_a_x]

At some point you have to have state. See where "state should live" here: https://reactjs.org/docs/thinking-in-react.html

But the very fact that we're having this debate is proving my point. React's programming model is unnecessarily complicated. JavaScript + DOM is all you need. The simple libs (each less than 500 lines) I pointed to get you close to this without sacrificing productivity or code maintainability while keeping the programming model simple.

[upheaval7276 → petilon]

First off, this is not “the point of React”. Second, direct use of setState is not somehow the only path to focused DOM updates with React. In order to understand this better, I suggest you read up on the topic of Reconciliation in React - https://reactjs.org/docs/reconciliation.html

[hesarenu → petilon]

The point of React is components. Simple components to build complex apps. Dom diffing are just lower level concerns.

[petilon → hesarenu]

There are better ways to build components. The problem with React components is that they are only compatible with React. What if there was a way to build components in a better way, and what if those components were compatible with all current and future frameworks? There is a way to do that. Look up W3 Web Components specification. There's sample code here: https://github.com/wisercoder/uibuilder

[hesarenu → petilon]

So another library. From the examples i am not impressed. Web-component are not panacea. For me reactjs is still the best frontend framework out there.