3 Extremely Useful React Tips to Speed Up The Development Process
Nowadays, React has slowly become a new standard for web applications and it seems that it is not going anywhere any time soon. So, here are three extremely useful and time-saving tricks that you can use while developing your React apps.
1. What if the prop name and value are the same?
The main way to flow data from a parent to child in React is props and it is used everywhere. Sometimes the prop name and the value passed can be different. However, there are many times that the developer had to write this repetitive and nonsense stuff.
If there was a way, something like object keys with the same-named values, everything could be very easy, isn’t it? But luckily, these all are, under the hood, objects! If you inspect the converted JSX, you will notice that the props we passed are converted to an object standing in the second argument of React.createElement function. So, let's exploit this and make our lives easier.
We can achieve the same result above, just by spreading an object that contains the props using {...{props}} syntax.
2. Creating Context Hooks
Another concept that is used heavily in React is Context API. It basically lets us pass data to all children that are wrapped inside the Provider. Normally, we consume the context like that:
However, as you noticed, whenever we want to consume context, we have to import both useContext and ThemeContext. This is kind of irritating if the application has many contexts and these contexts are consumed heavily. Fortunately, we can create a custom hook for each context just for handling context consuming setup.
And then the context can be consumed only by importing useTheme hook. This syntax is easier to use and also easier to read.
3. 150 Lines Long (!) Component Imports
While working on a big React project, it is a kind of nightmare to import all of the components by hand and writing the relative paths one by one. At the beginning of components, I know we all see imports like that:
As you see, all of the components are imported from the same components folder. What if we could import all of these from components folder by specifying the name of the folder once? This is possible but there is a step to achieve it.
Firstly create an index.js file inside the components folder. Since we named it index, when we point to this folder, it will directly look into index.js file. So, here is a perfect place to export all of our components.
And now, we are able to import our components directly from components folder.
This is pretty elegant and much easier to use. In addition, you can use this concept to export anything from a folder such as static assets or custom hooks.
Update
I wrote a sequel to this story to teach you three more tricks in React. Make sure you checked it out.
Congratulations! Now you know new three tricks and I think you will use all of them on a daily basis. If you are curious about three more useful tricks on JavaScript, make sure you checked out the article below.
Thank you for reading. If you liked it, make sure you clap, and if you have anything to say about the article, leave a response. See you in the next article.
Further Reading
