DEV Community

Discussion on: React Conditional Rendering Best Practices with 7 Different Methods

View post
Collapse
 
lexlohr profile image
Alex Lohr •

Small nitpick about your example:

const ALERT_STATUS = (message) => ({
  warning: <AlertComponent status="warning" message={message}/>,
  error: <AlertComponent status="error" message={message}/>,
  success: <AlertComponent status="success" message={message}/>,
  info: <AlertComponent status="info" message={message}/>
})

let newVariable = ALERT_STATUS(messageState)[status];

will create all the components virtual dom initialized with the message. This may not be too much of a performance issue, but could potentially trigger side effects. It would therefore be better to use

const ALERT_STATUS = {
  warning: (message) => <AlertComponent status="warning" message={message}/>,
  error: (message) => <AlertComponent status="error" message={message}/>,
  success: (message) => <AlertComponent status="success" message={message}/>,
  info: (message) => <AlertComponent status="info" message={message}/>
}

let newVariable = ALERT_STATUS[status](messageState);
Collapse
 
syakirurahman profile image
Syakir Rahman • • Edited

Thanks for your correction! :)
I dont consider about that. Will update it later.