Welcome to Part 4 of our series on "React best practices in 2023"! In this part, we will explore various techniques and strategies to write clean a...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Instead of use prop types use typescript with FC
Thank you for your suggestion!
If you are using JavaScript (without TypeScript), you can continue using
prop-types
to validate the props in your components.If you are using TypeScript, you can benefit from the additional type-checking capabilities it offers by using the
FC
type to define your components' props.Does not have any reason to not use TS.
But you don't need FC.
FC is a unnecessary import, you can destructure the props as the examples below
There's a small mistake in no. 10: Shorthand for boolean props, should be multiSelect={true} replaced by multiSelect prop instead of multiSelect={false}.
Thank you for bringing the issue!
I updated the snippet now.
I think you're mistaken between named exports and named functions. If you write your components like this:
Your editor has no trouble finding out what you mean when you try to use
MyNamedFunctionComponent
.The same goes for variables like this:
What you DONT want to do is:
And infact recommended react eslint rules will warn you not to do that.
I'm also quite unsure if your tree shaking claim is true... If it is true it would only be for webpack 3 maybe. I'm definitely not seeing "use default exports" on this checklist: smashingmagazine.com/2021/05/tree-...
I apologize for any confusion caused in my blog.
I am familiar with the concept of named and default exports. Please refer to the following code snippet to understand the difference between default and named exports:
In the case of default exports, refactoring can be more challenging. Here's an example:
Default export:
However, when using named exports, this confusion can be avoided.
Regarding the claim about tree shaking, it's important to note that tree shaking itself is not directly dependent on the use of default exports.
By utilizing named exports, you gain more control over the exported values. This allows unused values to be eliminated during the bundling process, resulting in a smaller bundle size.
Named exports are objects though. If you have one file, with several named exports, in the background, it just looks like a big object to the bundler and all that code will be included, even if you only use one of the named exports in your code. That is exactly why some libraries recommend you use their default exports and NOT their named exports, because the named exports are all exported from a single
index.ts
file.If you really want to be religious about optimizing for tree shaking, it doesnt matter what kind of export you use, named or default. The only rule is: export one thing per file. In reality though, it doesnt matter that much. If you have some utils file with a bunch of named exports, it doesnt matter that they all get included in the bundle, because the overhead of some small functions is minimal.
I agree your point!
In Tree shaking, the key is to import only the specific exports you need, whether they are named or default exports.
When we using default exports, we don't need to specify a specific name when importing that value into another file. You can give it any name you want when you import it.
You are ChatGPT :P
I didn't use ChatGPT for my comments!
Are you using chat gpt for your replies haha? Same tone of voice..
Ha ha! I am using Quillbot to convert my sentence and improve it further.
I wonder, why do you write all your exports at the bottom?
export
next to each exported declaration.Excellents points. I agree with all of them.
About How you "Avoid huge component" I believe what you do with your components is just as bad if not worse tho. The modularity is too extreme and at the end, it's a nightmare to work with.
Hello,
I thoroughly enjoyed reading your React Best Practices in 2023 series. I'm a developer from South Korea, and I'm interested in translating the four articles included in your React Best Practices in 2023 series into Korean. I would like to post them on my personal blog with proper attribution and links. Would that be possible? I believe it would make it more convenient for Korean developers to access your content. Looking forward to your response :) Have a great day!
React.memo is less performant than just rendering the component again. Under the hood, the memo function has more operations than rendering a simple component