DEV Community

React... Why so complicated...?

Joel Ruiz on October 03, 2019

React has really great concepts. But when it comes to data management, everyone keeps coming up with more ridiculous methodologies and frameworks ...

Read full post

Seanmclem • Oct 3 '19 • Edited

In the first few lines of this article you quickly equate how complicated Redux can be with how complicated react is. React in itself can be rather simple and elegant. Adding a whole separate Library called Redux doesn't make react itself more complicated. It's the library that you're adding.

React's own State Management, context api, could be a bit intimidating at first too, but less than redux. Which is why you shouldn't use any state management at all when starting to learn react. You should probably just start with simple components, passing the state through props, and slowly add more complicated things.

Also, with a modest amount of patient reading all of the code samples you showed can be understood. All it takes is a little bit of JavaScript literacy and some time.

It didn't become as popular as it is because of unreadability and needless complication. Like any other programming concept all it takes is time, patience, and capacity to learn.

Joel Ruiz • Oct 3 '19 • Edited

You make great points. I should have started with my React examples.

But the examples I have shown are not ideal for actual applications. There is a constant need to cross reference data, and it should be ready to happen at any time.

I feel like many frameworks try to have you hardcode data relationships against each component.

If we lock ourselves in, we just end up having to refactor several parts to add the new feature. For instance, NoSQL is popular for modern applications, but then we turn 180 degrees and lock down data in our applications.

If we can freely access any data at any time, it might increase chaos, but coding time for wild requirements can be handled quickly.

Seanmclem • Oct 3 '19

It's just that, React is a simple UI library. How you get and manage data is really up to you. It can be whatever you want it to be.

Dawid Kimana • Apr 17 '20 • Edited

I think react became very popular because of 2 things: the concepts it introduced, and there were no better alternatives at the time (before vue and angular 2+). I write react, and it is needlessly complicated. The pro is that you'll become a better js developer, the con is weeping and gnashing of teeth.. Wrote a small app using svelte and what a breath of fresh air! I think the svelte way of doing things is the future

Ilmir Shaikhutdinov • Oct 3 '19

Good post! I agree that a react state management can be complicated. To make it easier, you can use an approach the smart/dumb component, where about state know only smart components.
For myself i find that the less state in the app, the more comprehensible the code will be. Is it cool when you state in one place and not spread at all app, for this case i prefer Akita. It is more convenient, OOP-like state management, you can read about this here.

SnowPrimate • Jul 15 '20 • Edited

That's a nice post despite being a noobie. I've searched this article just to rant on React, learning it just to learn something new but now I actually feel a bit more motivated because it seems like I'm not alone in this frustration! :D
Also, Joel, do you still stand for this, or do you feel like React developers created solutions for these issues in the last months?

Heiker • Oct 3 '19

What if you push (almost) all the responsability to the actions?

You could tweak redux a little bit by writing a middleware.

const thunk = store => next => action =>
    typeof action === 'function'
      ? next({type: '', state: action(store.getState)})
      : next(action)

Then create a very generic reducer.

const reducer = function(state, action) {
  if(typeof action.state !== 'undefined') {
    return Object.assign({}, state, action.state)
  }

  return initialState()
}

And now you can have actions like this:

let nextTodoId = 0
export const addTodo = text => state => {
  // complexity, my old friend, you can live here

  return {
    todos: state().todos.concat({
      id: nextTodoId++,
      text,
      completed: false
    })
  }
}

export const setVisibilityFilter = filter => state => ({
  visibilityFilter: filter
})

Joel Ruiz • Oct 3 '19 • Edited

This has lots of potential! Thank you for sharing.

With a bit more tweaks this could be very clean for developers to use without much thought. I will play with this trick thanks!

Paul James Kerrigan • Nov 29 '20

There are many misunderstandings with coding in React, due to the complexity of modern JavaScript syntax used by the latest frameworks. It achieves very little, with so much code and files.

You're so right!

I love Python, Django and Django REST Framework because I can easily setup a basic API backend in under an hour, with multiple models, views, serializers, permissions and authentication. I can do a lot very quickly.

However, React seems like it requires so much more code just to do something that should be incredibly simple and basic. If you want to manage state in any meaningful way, you need Redux, which adds several extra files to essentially create a global dictionary and some functions to interact with it.

Why must it be so complicated? It really needn't be.

I don't think it helps that Javascript is an absolutely miserable language to use. The fact that there's nothing to replace it means that we've got to rely on a truly frustrating tool.

Ujjwaldeep Singh • Nov 30 '20

I feel similar... though I was able to understand ES6 and React easily, but it is very difficult for me to retain that information in my mind.

But, Python and Django have such readable code and easy to work on, and the information is very easy to retain.

Currently, I am trying to learn how to setup api with django rest framework and use that with React.

fpereiro • Jun 14 '21 • Edited

Hi @joetex ! Thank you for your article. When first encountering React years ago, I felt it was way too complex for what it offered - years later, I still think the same, although I've come to appreciate its merits more, particularly compared to previous frameworks (notably, Angular).

"In the meantime, I'll be wishing for one of you geniuses to bring back simplicity to programming."

I lay absolutely no claim to being a genius (I'm honestly closer to being the opposite of one), but I have spent a few years developing a framework focused on simplicity and understanding. There might be a small probability you'd be interested in it. I've finally released a version that I feel it's mature enough (at both a conceptual and implementation level) to bother other humans to perhaps take a look: github.com/fpereiro/gotob

The framework uses a single global object as its sole repository of info, exactly as Flatiron/Flatstore.

Thank you again for your article!

Andreas Møller • Oct 3 '19

const Counter () => {
  const [count, setCount] = useState(0);
  return (<button onClick={() => setCount(count + 1)}>{count}</button>)
}

... You are welcome

Joel Ruiz • Oct 3 '19 • Edited

This just in, a new business requirement! Add users name entered from another component. And based on their role, they increment by 2.

Your setup is cleaner though!

Andreas Møller • Oct 3 '19

Add the user state to a common ancestor. Pass the user object down as props.

State management is by far the hardest part of frontend development. But react offers some if the best tools out there.

mindphuq • Nov 5 '19 • Edited

And there are still devs out there that claim, React is as simple as just writing some HTML with a few JS code in between.

Might be true if all you do is a todoList. But want to start React in a more complex manner? You get stuck in that state thing.

I had the "luck" to get pushed into React (which is completely new to me) with writing an app that let's the user construct designs. It uses external libs, http-calls, backend connection, single sign-on requirements ect. And all that needs to be passed around into different children and then you want to write it in a way, that you know in 3 years wtf you did back then. I still want to see someone who does that with "just write some HTML"...

mauricioarangoosorio • Oct 18 '21

Please take a look at htmx. Brings me tears of joy for its simplicity. And for ux interactions, Alpine and hyperscript are simply awesome. No cumbersome webpack configurations, no packaging, no nonsense. Just plain and simple instructions of code. So you can spend more time improving your project and less time fiddling with non essential tasks.