I've another article about React best practices and patterns to reduce code. It's a good article to read before you start to write your own React c...
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
Not really, no. Use useReducer.
No.
... while there are places where this does make sense, especially if you're in a component that is otherwise 100% declarative, for the most part, avoid.
Absolutely not. Always pass exactly the parameters you need. Do not ever pass a wholesale ...rest props to a component.
Wow! OK, I was not aware of Fragment. Great tip . . . when it's useful. It has a specific purpose, and your example is not it.
About the last exemple on the key : why not use the key in SomeComponent even if you dont use the key. i.e. like :
Thanks for pointing it out, I've missed one more component. I meant was this
Hello Rahul, FYI we've added your blog post on a GitHub project gathering content about best coding practices :)
github.com/promyze/best-coding-pra...
"Use styled-components to style your components."
This should be highlighted as your opinion.
Not sure you can argue this is a must.
By separating your styling into a css file, you are not polluting your source with styling.
Thanks for suggestions, I've added.
Please delete sections of your article you don't know how they really work. The worst thing you can do is to teach people bad stuff
Multiple setState are now batched.
Functions outside of jsx but inside component are basically the same thing, new function on every render
Props destructoring is considered bad practice
React.Fragment suports key
All your complaints are addressed in this post.
@johnsoriano Has already answered few of questions.
React batching is not available in the current react version. It'll be available for react-18, react-18 is rc releasead.
Stop saying I don't read the article, as the article was updated after my comments. Use you brain...
Batching is available in 17, but not for async situations like setTimeout
I agreed, but that's why I added setTimeout in my example. I've not updated article example, I just added note of react 18.
This is a great article. One thing I've done in the past is setup ESLint to catch some things like this. I'll look to see if I can add some more, but it'll auto catch and even fix a lot of these things
This is quite an useful article!
I have 1 question, what is wrong with using props like
className
for component props? Maybe I have aButton
component that has some pre-defined styles but I will also keep the option to add more styles later on (say margins or text size) using theclassName
prop whenever I re-use the component. Will it be not a better way than declaring variants for every possible situation?You can use there is no hard and fast rule, But try to avoid for any custom prop. let say you have button component you want 2 types of button contained and ghost, so don't use like style="ghost" or style="contained".
Ah, I see.
it's good to know React.memo to avoid unnecessary renders. But I think it is more important to know how to make good use of React.memo since we tend to misuse it.
Good point, I'll add note for that. Thank you for pointing it out 😊
I'd add some more:
Examples:
Pretty good content, ¡thanks!
HEY MAN! YOU ARE AWESOME!
All of those ones Realy amazing! and I will start using them immediately, please write more!
"Use React.memo() wisely, don't use memo where component often re-renders with props."
Can u explain why? Supposing I have a child component that takes props, what you suggest I should? Don't call React.memo() on the child component?
don't use memo where component often re-renders because of props. React.memo does not help because it's anyway going re-render.
const onClick = useCallback(() => {
setCount(1);
// ...
}, [deps]);
return (
Click
);
Why are we using usecallback here. is there any specific reason here.
If setCount was the only thing called then it would be pointless but all these hooks are just different forms of memoization used for different purposes.
useCallback creates a cached method preventing a re-render if the deps did not change. useState dispatcher already does this so memoizing it alone adds no value.
Can you share me the article
Use object(Map) instead of switch statement. I've already mentioned the same in my previous article for reducers.
I don't have clearly why es better use man instead of switch
dev.to/devsmitra/react-best-practi...
Point number 2, It's almost similar to redux-toolkit.
Thanks Alexandr, But in this article I've not used any difficult words. Only heading that can converted into another language, I believe that much also all software engineers/students can understand.
My point is heading can understand by anyone, it does not require expertise in english. Code anyway not going to change.
Okay, thanks btw
@doberman2029 You can translate, but make sure you add the original blog link also.
For the last example of the keys, could Children.ToArray be used?
Actually, my intention was to show if we have 2 components, that could be the same or different. I think my example is creating confusion, I've updated the example hope that helps.
Useful! Thanks! I would recommend to read this one: webman.pro/blog/react-best-practices/
You can comment also here:
eccco.space/s/cadf73c1-1900-4fe8-a...