Maintaining standards and a good workflow while building the React application can give you some hard times, mainly because of time constraints. We usually do some things that make it hard to either debug or read our code later and that's a bad practice.
Here's a list of things to avoid when build React applications. Consider that 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.
- 💡 Avoid having large Component files.
Having large component files gets annoying for everyone working in your team, and in time it may be hard debugging components previously built. Dividing components should be done by tearing down a user interface to the most basic building blocks or components. This reduces the complexity of the component and provides an easier way of knowing if something goes wrong.
- 💡 Share reusable Functions across Components
Try your best to have components or files that aren't large, by declaring util functions that are used across multiple components and exporting those functions. This way the components can access them, and it helps to remove repeated codes.
- 💡 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 we create a function in the parent component and pass the function that interacts with that component. But in a case where the component for some reason doesn't work, we'd have to go a long way searching for the parent component that doesn't pass this function. One way to avoid this is to use the React context provider which shares state with all the children component it has in the application.
Top comments (0)