We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

You will be redirected back to this page right after signin

Blog hero image

Things not to do while building a react application

King Somto 27 August, 2021 | 3 min read

Introduction

Building react apps is hard but what is also harder is maintaining standards and a good workflow while building the react application mainly because of time constraints. We usually do some things that make it hard to either debug or read our code later on in life and that's bad. So in this article, I am gonna show you a list of things I did wrong when learning how to build React applications. Most of these points can be used in things like Angular and Vue.

Do not share CSS across multiple components

So one big mistake we make once in a while would be to have a central CSS file usually our app.css and just put all our styling inside that, this is very bad mainly because when the project starts getting large styles may start conflicting an example would be.

<Component1 className='test1' >
           <p>
               hi
           </p>
           <Component2 className='test2'>
               <p>
                   Hi again 
               </p>
           </Component2>
 </Component1>
 

The example above shows a situation of having a component component1 nested inside component2 a style affecting component1 p tag would affect component2 p tag because they share similar CSS files, this could bring up issues and make it hard to debug issues.

A solution would be to use the styled-components package that helps users isolate their styles in respect to the components.

Avoid having large Component files.

So this is a no-brainer, having large component files gets annoying not just for you but other developers that may join your team in the future might have a hard time debugging components you built previously. Dividing components should be done by tearing down a user interface to the most basic building blocks or components that can form a single unit and have independent logic, doing this reduces the complexity of the component and provides an easier way of knowing if something goes bad in the component. An extra rule to make would be if a particular div requires more than 2 or 3 functions to work it would be best to turn it to its own component or anything repeated more than once in a component like a special button or special text.

Share reusable Functions across Components

We try our best to have components or files that are not large, a good way of doing this is to declare util functions that are used across multiple components and export those functions so that the components can access them, this really helps to remove repeated codes declared across multiple files or components.

Passing functions down as children params

During development, we run into issues like parent components needing to update states to cause a re-render during the app's running process, so what we initially do is that we create a function in the parent component and pass the function that interacts with that component.

Join our newsletter
Join over 111,000 others and get access to exclusive content, job opportunities and more!

Let's look at an example

function App() {
   const [state, setState] = React.useState({
       name: ''
   })
   return (
       <div className="wrapper">
 
           <p>{state.name}</p>
 
           <Child grandChild onChange={() => {
               setState({
                   name: 'Somto'
               })
           }} >
 
           </Child>
 
       </div>
   );
}
 
 
const Child = ({  grandChild, onChange }) => {
   return <div>
       {grandChild && <Child onChange={onChange} />}
   </div>
}
 

The example above passes a function call into a component that then again passes that component to its child component, this method of passing functions works but in a case that the component for some reason does not pass the function or the passed function is commented out we would not be able to call it and we have to start going through a long hierarchy of components to find which parent component does not pass this function, this can be hard to debug, one way avoiding this is to use the React context provider which shares state with all the children component it has in the application.

Bonus List of things you should do.

Comment your code

It's a bit mundane but it's always a good practice to comment on your code so that people that pick up your codebase can easily hop on the codebase.

funny-comment.png

Add PropTypes in the component declaration.

As your app grows you can catch some bogs by using prototypes for type checking, adding prototypes also helps people maintaining your codebase to know the types of values your component can take.

Conclusions

So we were able to go through things that may not always be a good idea to do when building a react application but at the same time for debugging and maintaining purposes. The rule of thumb here is basically to always write code like the person who is going to maintain it is a violent psychopath that knows where you live.

Author's avatar
King Somto
I really dont know much but am willing to try and learn

Related Issues

open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 2
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 2
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Open
  • 0
  • 0
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 1
  • Intermediate
  • HTML

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email