Coding, as a profession, requires constant and continuous learning, problem-solving and staying up-to-date on the various helpful tools that are available out there.
Developers need to always be on the lookout for easy wins. There are skills you’ll acquire one day at a time over a lifetime, and others that you can pick up in a few hours and master in a couple of months.
Let’s take a look at some of the latter.
In this article, we’ll offer you ten great tips and tricks that will drastically improve your capabilities. Every trick or tip we’re about to cover is highly relevant, in demand and if you learn even one of them you’ll catapult yourself to the cutting edge of React development.
Let’s go!
Use Your Newfound Knowledge To Develop Apps on Common Ninja’s Developer Platform
- Learn To Use React With TypeScript
- Learn and Use Hooks
- Use the Context API for Smaller Applications and Redux for Applications Already Using Redux
- Swap Out Redux for React Query
- Use Fragments All the Time To Tidy Up the DOM and Improve Readability
- Add Storybook to Your React Project
- Learn Styled Components To Streamline Your CSS
- Use Error Boundaries To Contain the Damage — Even With Hooks
- Take a Day or Two and Master Creating Your Own Hooks
- Implement React.lazy and Suspense To Wait for Data
1. Learn To Use React With TypeScript
JavaScript is good, but it can be so much better! Learning how to use Typescript in your React projects is a game-changer with far-reaching productivity implications.
The autocomplete alone will save you days over the course of a project. You can stop using up mental bandwidth trying to remember what props your component is receiving. Stop breaking an application because you wrote: “colourChanger” instead of “colorChanger” or “clickEventHandler” instead of “clickHandlerEvent”. “Undefined is not a function” can cease to exist for you. You can’t get runtime errors for code that was never compiled.
Beyond the convenience and safety of types, by committing to learning Typescript and using it in your projects you’ll gain a greater understanding of how your app and its data are structured.
Plus other devs who pick up the project will know what’s going on with less reverse engineering. Yes, Typescript can take longer to set up. Migration hell is a real place and TypeScript bugs are about as much fun as a toddler on an airplane, but it’s all worth it.
2. Learn and Use Hooks
React was already the most loved JavaScript framework when the team decided to add hooks.
There are many reasons why they chose to include hooks. Cleaner code and adding state to functions are chief among them, but there are a few persistent problems with classes, and hooks manage to solve most of them.
When writing lifecycle methods it’s very common to repeat code in the componentDidMount and componentDidUpdate methods. First, you update something on component mount and then you do it again on update to keep your application in sync with data from outside your application.
Enter the useEffect hook.
useEffect focuses more on synchronization than the lifecycle; it eliminates the need to repeat code for load and update.
The hook takes two arguments. The first argument is the function which it runs and the second argument is an optional array that tells it when to run. If the array is empty, the hook will run on component mount. If there is some state or props in the array, it will run anytime there’s a change to that. If there’s nothing in the array it runs on every render.
3. Use the Context API for Smaller Applications and Redux for Applications Already Using Redux
In a recent video by Ben Awad, he interviewed Dan Abramov — the creator of Redux, who said that the main reason he’d use Redux is if the team was already using Redux.
Aside from being hilarious, Dan speaks the truth. React has grown to a point where it can natively support a lot of your state management with its own context API, and there are some better options. In 2022 we shouldn’t be so quick to implement a Redux store with all its boilerplate and bloat. Context and Redux do similar things. Both provide a way to pass data through the component tree without manually passing props down through each nested component.
There are differences, too, however. For example, Redux will only re-render a single component when state is changed, while react’s context API will re-render the entire tree anytime there’s a change in state.
So yeah, for smaller applications we’d recommend the context API. For a very complex state, we’d recommend you set up a Redux store.
Or you could…
4. Swap Out Redux for React Query
React Query is one of the best tools for data fetching and server state management. Out of the box it can handle caching, deduping, background refreshing, optimistic updates, data fetching and mutations.
Data fetching in React isn’t great. You need to track loading states and error states. On top of that, you need to think about caching and deduping.
To make an application that’s up to date, efficient, fast and won’t chew through mobile data you need to write a lot of extra code.
React Query will handle all of this for you and if you know how to write a promise that queries an endpoint you’re 90% of the way there.
The first step is you write a bunch of queries using axios of fetch or whatever you prefer that return a response.data.
Then you import the query to the component where you want to use it and pass that query as the second argument to the useQuery hook which you get from the react-query NPM package.
The first argument you give your useQuery hook is the name you want to give that query in cache. The second argument is the query.
You will then use destructuring to pull variables data, isLoading, isError and error out the returned object. You can then handle these loading and error states with minimal effort and a few conditionals.
5. Use Fragments All the Time To Tidy Up the DOM and Improve Readability
Here’s an easy one for you. To look like a seasoned React pro use fragments instead of wrapping every component in a div.
This is better for readability and another advantage is that fragments don’t exist. They are phantoms. You can use them as a parent element to return multiple elements from a component, without adding any additional nodes to the DOM. Don’t worry about how. It’s magic from the React Team, just appreciate them for it.
If your CSS is supposed to be applying to child elements and it’s wondering why it’s not working it’s likely because that easy to overlook parent div is getting in the way. This wouldn’t be happening if you were using Fragments.
You can do a <React.Fragment> or at the top of the page, import {Fragment} from “react” and use it later with <Fragment> or the true wizards use the shorthand syntax and just do <></>.
6. Add Storybook to Your React Project
Storybook is a development environment for building components in isolation. Depending on who you ask it’s either industry standard or drastic overkill. Really it depends on what you’re building. For a single landing page, it’s likely overkill. However, as your application grows in complexity, especially when multiple teams are working on it concurrently, Storybook is something you’ll wonder how you ever lived without.
It’s honestly hard to put into words why Storybook helps build React apps faster and better, so we made a list instead:
- React storybook allows you to pass props to your component through UI. You can change the props that are going in and play with them. By doing this you’ll work out ways to make components reusable that you never otherwise would have.
- It’s a great single source of truth for all the design elements in an organization. You can see all the different states of a component in the same place.
- You can test the responsiveness by seeing the design on different device sizes.
- Non technical people can interact with components.
- You can use it to make videos and presentations for GitHub commits and stakeholder meetings.
7. Learn Styled Components To Streamline Your CSS
We don’t know who needs to hear this but if you aren’t using styled components in your React projects in 2022 you’re doing it wrong. For starters having your CSS in a separate file is exhausting.
Sass is cool, and it solves the problems with inheritance, but it’s not on the same level as styled components.
The ability to pass props into CSS and use CSS conditional statements is game-changing. It makes it way easier and cleaner to build a theme or your own UI component library on top of styled components.
color: ${props => props.theme.main};
background: ${props => props.theme.secondary};
Looks simple. Increases reusability and saves a lot of time in the long run. You can also save your theme in your context with the useContext hook we discussed earlier to keep things really clean.
8. Use Error Boundaries To Contain the Damage — Even With Hooks
Error boundaries are extremely important for some fairly obvious reasons. If you don’t handle your errors that’s a bit of a noob move. But if you let errors break the entire application, that’s just embarrassing.
That’s why React has error boundaries. Recently, error boundaries have gotten trickier because we are all using React Hooks and there’s no way to handle error boundaries in hooks, or is there?
You can create a class to handle error boundaries and wrap any functional component that can cause an error inside of it.
Or if you don’t feel like writing this logic yourself, NPM is full of packets that can help you. https://github.com/bvaughn/react-error-boundary is a great way to get error boundaries in functional components. It even exposes a hook of its own to help with handling this issue.
9. Take a Day or Two and Master Creating Your Own Hooks
Do you feel like every tutorial you’ve ever watched, an article you’ve read, or a React doc you’ve ever gone through, about creating your own custom hooks was no big deal? Probably not.
Custom hooks can take a while to grasp and master. A large part of the problem is that you never really have to learn them. There’s always another way to achieve the same thing, so it’s easy to overlook them for years. You can navigate other people’s hooks with trial and error. When all the parts are already there it’s easy to understand what needs to go into them to get the intended result.
Creating a fresh hook from nothing is something else. If you haven’t already, we’d encourage you to take the time to really nail down custom hooks, even if it takes days or weeks of purposeful study. Once you get them, and it will happen, you’ll write some exceptionally clean, reusable code.
In no time at all, you’ll be writing hooks for everything. Going completely overboard with useWindowResize when a simple media query would have done the exact same thing.
10. Implement React.lazy and Suspense To Wait for Data
Lazy loading lets you load pieces of UI or data asynchronously. The syntax and implementation is really simple and if you’re not using it, chances are it’s because you don’t know that it exists.
const LazyComp = lazy(() => import(“./component/lazycomp”))
If you try to render that component to the screen you’re going to get an error. The reason why is that you need a <Suspense>. So wrap your component in a <Suspense></Suspense> and give it a fallback prop like this <Suspense fallback={<h2>Geez…I’m loading</h2>}>. There was a time when lazy loading was hard. Now, thanks to the ever-growing functionality of react, it’s stupidly easy.
Simplify and Improve Your React Development Process With Awesome Tips & Tricks
React is a great tool to use for web app development, but it can be even better when you know little-known tips and tricks that can help you simplify, improve and extend your React capabilities.
And, once you’ve mastered these amazing tips and tricks, you can develop apps, plugins, and other extensions on Common Ninja’s Developer Platform more effectively and in less time.
