React Developer Experience

I felt like I must share a few thoughts about my React development experiences, so this article was born. The following lines are only my own opinion, reflects my own reality, please read it with a critical eye, since a fellow React developer's experience can be very different.

Through the years as a developer, I had the opportunity to work with many JavaScript frameworks and libraries, but none of them captured my attention so much like React.

Things that make me happy while working with React

Oh, those components!

One of the features I really like in React, is the component-based architecture. It's a child's play to separate complex user interfaces into small, reusable parts. If for any reason, I need find a UI element in the source code like a "feature" not a bug it is really simple because of this structure. Collaboration, cooperation with other developers also a piece of cake. And if all of this is not enough, just think about the numerous packages, component, libraries written by the community. Naturally, choosing the right toolset requires consideration, like user score, maintainability, frequency of updates and of course is it aligned with my needs.

React developer community.

The community is active and helpful, vast amount of documentation, tutorial is readily available. Not to mention a lot of third-party library and tool makes the development with React enjoyable. Events, conferences are not uncommon, usually with great public attention.

The freedom

Without doubt, React offers great freedom, like my hands are not bound by how and precisely what tools do I need to use, to solve a problem. There are no limitations about how routing should work, or you need to query data like this, but the state management must be implemented in this way, or something can only function in this particular mode. Depending on the project, but if you want to use pure React or one of the frameworks is entirely the developer's decision. I am a bit afraid to mention, usage of vanilla JS or Typescript is optional, and this is causing heated debates. At the time of writing this article, generally accepted view, if you are not using Typescript, then you are not a real React developer.

Precisely because of this a lot of people has bad feelings regarding React. They ask the questions, how about big developer teams, who works on common code base, what is the folder structure, nomenclature for the code, what is the situation with enterprise level apps, etc.

For me there is a huge difference between if something is pushed, forced on me, even if it is for my own interest or if I get decided what is my preferred best solution for me and my app.

If you want to read more about the benefits of using React, you can do it from my earlier article.

When the grape is sour

Learning curve

I'll be honest, learning React can be a steep curve after leaving the absolute beginner level, particularly if the developer doesn't know the JavaScript ecosystem. A junior need to spend a lot of time to familiarise JSX and React hooks, but after you get the hang of it, you are on the right track.

State management

The other cumbersome issue is when a beginner developer comes face to face with state management. Take a big breath, spice it with dedication, and by jumping this bar become a fully-fledged React developer.

Old patterns, solutions

Assume a developer who is looking for help on the internet in 2023, and finds class components, lifecycle methods (which are the foundations of React till this day, but worn out thanks to the hooks), and rightfully ask of what are these? Only a few years passed, and these were our only options (sorry for the outlook).

And we haven't talked about render props and higher order component which hides into another mystical past. There are things, which are better to leave alone, since nothing good comes from if we disturb them.

DOM versus Virtual DOM

A developer can have hard times on the first occasion when trying to integrate D3.js or something similar into a React app, this is that time, when the developer realises the trouble, he/she got in. That's another day's story when I first encountered this. The D3.js changes the DOM, while React watches the Virtual DOM (from props, state, parent changes the component will re-render).

const TestComponent = () => {
    const [backgroundColor, setBackgroundColor] = useState('')

    const handleColorChange = () => {
        setBackgroundColor('red')
    }

    const handleD3Change = () => {
        d3.select("#myID").style("background-color", "green")
    }

    return (
        <div id="myID" style={{backgroundColor}}>
            <button
                type='button'
                onClick={handleColorChange}
            >
                Change background to red.
            </button>
            <button
                type='button'
                onClick={handleD3Change}
            >
                Change background to green using D3.js
            </button>
            <div>
                Hello World!
            </div>
        </div>
    )
}

1. Change the background to red.
2. Change the background to green, by modifying the DOM with D3.js
3. Change the background to red using the usual React path.
4. Be confused.

Of course, there are solutions for this issue, but not obvious ones, and out of scope of this article.

Rapidly changing ecosystem

One important thing to keep in mind, React is a rapidly changing ecosystem. As a developer you need to be up-to-date with the latest updates and recommended procedures. In my experience is a real challenge, especially with big and complex projects, but in the end it worth the invested time and energy.

Summary

As a summary, when React arrived it was a game changer in my developer life. The component-based architecture, Virtual DOM and an active community made the web application development more effective and enjoyable. I'm not saying it is free from challenges, but in exchange the reward worth the struggle, so we can come into the office with a big smile to create again something awesome today with this tool.