Originally published at https://www.developerway.com. The website has more articles like this π
One of the most interesting and challenging t...
For further actions, you may consider blocking this person and/or reporting abuse
My mind is blown. I did not know that passing the
childrenprop prevented the children from re-rendering if the parent re-renders. I referred back to your articleand one of the ways React can re-render is
So my mind is absolutely blown that the children prop slightly invalidates the sentence above.
This stack overflow answer helped me understand why
I absolutely love your articles. They are so in depth and your topics are exactly what I want to read about. Thank you for taking the time to write these!
Thank you for such nice feedback π₯°
Gives me motivation to write more βΊοΈ
Nice article. I have a question.
I have this header:
header > div with icon theme and div with profile user
When click on div with profile user dropdown open.
I must divide in multiple components because the logic of open / close dropdown belongs profile not a header component ? Correct ?
The beauty of React is there are no strict rules, only recommendations and suggestions, and people can make their own decisions based on them and what makes sense for their application π
If the only thing that you have in your header is a div with an icon and the dropdown menu, I wouldn't bother with extraction - the component is going to be small enough to read through it anyway.
If you have or plan to have in the nearest future multiple items there, and the header is going to manage multiple states independent from each other, then extracting the logic of the dropdown would help with readability. And then yes, extracting it would make sense.
thank you for answering. In this moment my header manages open / close dropdown's state and with context the theme of application. I'm gonna include an icon that it will manage close or open sidebar. I think divided is perfect solution because i don't want to header manages this 3 different state, obviously as you said there aren't fixed rule. My problem were the size of component and managed this state / context. Congratulations again for the articles.
Excellent article once again!
Really good. Thanks for sharing.
@adevnadia since you worked on Jira, I'd like to ask you a question I'm very curious. How do you handle modals? I know it can be very complex handle multiple modal to add/edit/delete. Is it something similar to github.com/eBay/nice-modal-react ?
And I'd love to see some more advanced patterns as well like:
1) compound composition:
<Menu.Button></Menu.Button>2) render propos:
<Menu.Item>{({ active }) => <button className={clsx(active ? '' : '')} ></button>}</Menu.Item>3) custom hooks:
const { open, close, isOpen } = useModal4) return component from custom hooks:
const { Modal, open } = useModalHi @gabrielmlinassi ,
In Jira they use Atlaskit - Atlassian components library. That one: atlassian.design/components/modal-...
As for other composition patterns: you might be interested in this article: developerway.com/posts/react-compo..., I cover render props in detail there.
And this one for custom hooks:
developerway.com/posts/why-custom-..., it covers exactly the usecase of returning a component (Modal) from a hook. In short - not a good idea, prone to bugs and performance issues.
Great article! While I understand it wasn't really the focus, I think the code could be improved with the use of semantic HTML tags. π
Next time for sure π
Couldn't agree more!
Mind if you share on how you will approach the folder/file structuring?
Hi @drewberrysteph, you mean for this particular code, or guidelines in general?
Hi Nadia! Great article as always. An article about the guidelines in general and your preferations in the subject would be awesome! Thanks for your time and effort ππ»
Will do!
I translated this article here to Brazilian Portuguese.
Thanks, π