You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Because each time react goes there it recreate the func which change id thus registering a change in the component. useCallback allows you to avoid that by caching your function and recreating it only if its dependencies changes (a dependency list you should explicitly write).
Read more here: https://reactjs.org/docs/hooks-reference.html#usecallback
Do not generate key based on array index
Keys based on index are not stable identifiers for your components and can lead to fucked up bugs. Example you used:
A change in the list (like replacing one element in the array) might not change any key and then not trigger any rendering (leading to a difference between the data in your state and the data rendered)
Using the value in the key is the way to go. (Note: generating an uuid on the fly is not better since it will change your keys even if nothing has changed. It's a common "workaround")
Read more here: https://reactjs.org/docs/lists-and-keys.html#keys
Boolean props
<StateTextInput required={true} />
Can be changed to
<StateTextInput required />
A rule often enforced in linters
Use template strings
key={"cat-" + cat.id}
Can be changed to
key={`cat-${cat.id}`}
This is better since you avoid the + and use a mechanism dedicated to string.
Usually enforced in linters.
Some comments on code style in React
Avoid some rendering with useCallback
This component will update the virtual DOM (and trigger a new render):
Because each time react goes there it recreate the func which change id thus registering a change in the component.
useCallback
allows you to avoid that by caching your function and recreating it only if its dependencies changes (a dependency list you should explicitly write).Read more here: https://reactjs.org/docs/hooks-reference.html#usecallback
Do not generate key based on array index
Keys based on index are not stable identifiers for your components and can lead to fucked up bugs. Example you used:
A change in the list (like replacing one element in the array) might not change any key and then not trigger any rendering (leading to a difference between the data in your state and the data rendered)
Using the value in the key is the way to go. (Note: generating an uuid on the fly is not better since it will change your keys even if nothing has changed. It's a common "workaround")
Read more here: https://reactjs.org/docs/lists-and-keys.html#keys
Boolean props
Can be changed to
A rule often enforced in linters
Use template strings
Can be changed to
This is better since you avoid the
+
and use a mechanism dedicated to string.Usually enforced in linters.
One component per file
Yup all in the title :D
Component declaration
Is usually declared like this:
Not a revolution, but just the way most ReactJS developers write func components
Escape quote and double quotes in JSX
Changed to
More hooks
You used some hooks but kept some HOC, try to make it uniform:
react-redux
connect
→useDispatch
&useSelector
Read more: https://react-redux.js.org/next/api/hooks
Iterators
You should use
Object.entries
Read more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
That's all for now. I didn't went throught all the code though. I hope you enjoyed the reading :)
All the best guys!
The text was updated successfully, but these errors were encountered: