Refactor StoryDescription class to function component #996
Conversation
| /> | ||
| ); | ||
| } | ||
| const descriptionContent = () => ( |
There was a problem hiding this comment.
Do you think we should use memo approach here to avoid re-rendering?
cc: @talyssonoc
There was a problem hiding this comment.
For both cases, I think memo won't make a different in re-rendering since it won't break the way React compares elements.
But I think we could avoid having these functions at all and use a ternary directly in the bottom part of the component. To improve even more, we could move the value of isNew || editingDescription to a variable, like const showDescriptionInput = isNew || editingDescription.
There was a problem hiding this comment.
Thanks for the input, guys. I've updated the PR with the suggested changes.
| isNew, | ||
| editingDescription, | ||
| }) => { | ||
| const editDescription = () => ( |
There was a problem hiding this comment.
Do you think we should use memo approach here to avoid re-rendering?
cc: @talyssonoc
| description, | ||
| onClick, | ||
| isNew, | ||
| editingDescription, |
There was a problem hiding this comment.
We could rename this to isEditingDescription
There was a problem hiding this comment.
Couldn't commit this change for some eslint issue in some files, but the issue doesn't seem to be related to the change itself... seems to be preexistent. We can talk more about it, if you wish!
| {I18n.t('activerecord.attributes.story.description')} | ||
| </label> | ||
| <br /> | ||
| {isNew || editingDescription ? editDescription() : descriptionContent()} |
There was a problem hiding this comment.
Move isNew || editingDescription to a new variable const isToRenderEditDescription : boolean = sNew || editingDescription; and also renders those components straightforward not calling functions
julialbq
force-pushed
the
refactor/storydescription-class-to-function
branch
from
fa689ca to
8aad9c8
Compare
What this PR do ?
Updates StoryDescription into a function component.
Related Issues
Update React classes to function components
Screenshots (if applicable)
Additional Notes (if any)