Here's my POV why react is so hard. Especially for OOP-minded and beginner.

useEffect doesn't make any sense

Since React 16.8, They introduced more simple way to write React in alternative to class based component. They call it React Hooks. To be honest, It really makes write React app more simple.

But, it has a downside for an OOP-minded programmer like me. In React Hooks, we use state to declare variables, by calling useState function.

And... there's a function called useEffect. At first, it doesn't make sense. I don't need fancy effects to build simple ToDo App. It turns out, it called useEffect not because of it will use animation effect. But, every DOM changing or data fetching are called "side-effect". That's why they named it useEffect. It doesn't make any sense for me. It should be called update, onRefresh or something like that.

According to documentation useEffect is Hook version of componentDidMount, componentDidUpdate, and componentWillUnmount combined. Every mount, update and unmount will call useEffect. It doesn't make any sense right??

In contrary from most developers, I will recommend you to keep using React class based component, if you have strong OOP philosophy. It more easy to understand although it will require more codes.

Comparison React hooks vs React class based component

Logic and View mixed together

As an OOP-minded developer, most of us like to separate codes between logics and views. Logic is for data manipulation, data fetching, etc. and view is for showing end result to user. Usually, we use html or templating engine to make it more cleaner.

But, in React you cannot separate "html" from JS. That's why its called JSX. If you're not accustomed by this, you'll constantly lost in your own codes. In order to avoid this, you need to splice component into smaller components.

CSS-in-JS

React can generate CSS by using JS. Biggest difference between classic CSS and CSS-in-JS is syntax formatting. CSS-in-JS use camel case.

This is optional feature, we can still import classic CSS module.

State Management

Communication between components need a global state. A lot of ways to manage state in React. The official way is using React Context. You don't need any dependencies to use React Context. But, it has limitation. It's not recommend if your app is growing bigger and bigger.

The alternative is using Redux. Most people are using Redux. In real life, Redux is the standard React State Management. A lot of React job opportunities include Redux as Technical Requirement.

In my honest opinion, learning curve of React Context and Redux is too steep. Both of them are too complex.

Credits :

• Thumbnail image by RealToughCandy.com
• React useEffect documentation
• Snipped code of "Comparison React hooks vs React class based component" by bitsrc.io
• React Context
• Redux