DEV Community

Discussion on: A Tip to Make Your React Code Better and Cleaner

Collapse
 
adam0chayon profile image
Adam • Edited

Hey Christian, and any others reading this, please note -
The "renderX()" functions as defined here will cause all of the inputs to unmount and remount an every render and can therefore be very costly.
This is due to the way React's diffing algorithm (reconciliation) works.
The snippets should either be inlined, memoized, or extracted to a separate function with props.

For more information, see the following discussions -
mobile.twitter.com/0xca0a/status/1...
stackoverflow.com/questions/523720...

I will also add that when mapping a list to components, you should always use the key prop.
Read here -
paulgray.net/keys-in-react/