The 7 Traits of a Rock Star React Developer

To read more articles like this, visit my blog

Getting the job done is the most important thing in software development. But how do you separate yourself from others? Well, from my experience, I can say the difference is in the approach.

Over the years, I’ve worked with several React developers. Here are some things that separate a great developer from an average one.

1. They Don’t Use Index as the Key

When we render a list, we usually get a warning saying we need to provide a key for each list item. We lazy people often use the index as the key.

Something like this:

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

But in the React documentation, they said this:

“We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.”

It’s always advisable to use a unique property as a key, or if your data doesn’t have any unique attributes, then you can think of using nanoid, which generates a unique key.

Our previous example can be rewritten like this:

import { nanoid } from 'nanoid'

const todoItems = todos.map((todo) =>
  <li key={nanoid()}>
    {todo.text}
  </li>
);

UPDATE: According to the updated nanoid documentation it’s no longer recommended to use nanoid() for performance issues. So you really need to find a proper key for your list.

2. They Use Fragments Over Divs

We all know React works with a virtual DOM and compares it with the actual DOM to render. But if there are unnecessary nodes to compare, it’s not good for performance.

For example, if we want to render three components, we group them inside a div.

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)

But if we notice carefully, then div that’s used here is doing nothing. Also, it’s adding an extra node in our virtual DOM. React fragments solve this problem. What’s said in the documentation is:

“A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.”

So let's modify our previous example:

return (
  <React.Fragment>
     <Component1 />
     <Component2 />
     <Component3 />
  <React.Fragment/>  
)

This way, we can group multiple components without adding an extra node.

3. Minimum Dependency

Props are wonderful. But beginners sometimes fail to understand that just passing a bunch of props can create many issues. For example, look at the following code.

export default function MyComponent({data , isAdmin , isLoading , searchData}){

  processData(data);

  if(isLoading) return <div> Loading... </div>
  if(isAdmin) return <div> This is admin </div>

  return <div> This is normal </div>

}

Here are multiple bad things going on:

• We pass a prop named data. We don’t know where it comes from or if it’s even valid or not.

• isLoading indicates that maybe there’s some kind of async operation going on

• Only God knows what to do with searchData . Maybe someone added it and forgot to remove it.

So after a certain point, this becomes a problem. Now you have to go up the tree and find the respective purposes for these data.

What’s recommended instead

• Good developers try to keep the number of props to the absolute minimum. Only pass props that are relevant for rendering the UI.

• For other purposes, use some kind of central data store (like Redux or Context)

Our previous example can look something like this:

export default function MyComponent(){

  const isAdmin = useAuth();
  const { isLoading , data } = useFetch();

  processData(data);

  if(isLoading) return <div> Loading... </div>
  if(isAdmin) return <div> This is admin </div>

  return <div> This is normal </div>

}

So now you have a component that no longer depends on its parent.

4. They Use Libraries Efficiently

Libraries are here to make our lives easier. But if you start using lots of packages mindlessly, your project will soon get bloated with lots of unnecessary code.

Experienced developers will look for the smallest library that gets the job done.

For example, We all know and love Moment.js, but do you need all the localization for your project? Well, most of us don’t.

Only import those parts of the library that you need.

Here’s a great resource for you on how to do it.

5. They Don’t Define Functions Inside the Render

React allows us to define functions right inside the JSX. Like the following:

export default function MyComponent(){

  const [status , setStatus] = useState(false);

  return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>  
      This is a bad example 
    </button>  
  )
}

For simple operations like this, it’s not a big deal. But it’s a bad practice. It harms readability. Instead, what you can do is:

export default function MyComponent(){

  const [status , setStatus] = useState(false);

  const submitData = () => {
    // You should use it with useDispatch()
    dispatch(ACTION_TO_SEND_DATA)
  }

  return (
    <button onClick={submitData}>  
      This is a bad example 
    </button>  
  )
}

6. They Understand webpack

React has made it easy to scaffold a project from scratch with the awesome utility, Create React App.

After this, we generally don’t need to use anything else. We just npm install and npm run build, and we’re good to go.

But under the hood, all the magic is happening with webpack, Babel, and other libraries.

In our average life, we don’t need to touch these things that often, but in some situations (like code splitting), we need to understand how these things work.

Knowledge of webpack comes in handy here, and experienced developers have at least a minimum idea about this.
6 Webpack Concepts for Advanced React Developers
*Concepts to help you understand React from the inside*betterprogramming.pub

7. They Understand Reconciliation

React is very performant because it doesn’t do operations on the actual DOM. It creates its own virtual DOM and only updates the part of the DOM if necessary.

This process is called reconciliation.

Although React is very performant by default, Understanding these processes helps improve the performance.

Conclusion

You may not need all of these in your day-to-day life. But having these concepts can take you a long way.

If you liked this, here is another article for your next React project

Have a great day!

Get in touch with me via LinkedIn or my Personal website