The evolution of a React application - 5 architecture styles you need to know

[@bonoliu8336]

Watching this after one whole year😂this is still relevant and helpful 👍 nice diagram

[@icodeit.juntao]

Thanks mate

[@xyvadimxy]

really well explained, thanks!

[@icodeit.juntao]

Thanks @xyvadimxy, for your feedback!

[@yurionthecode]

Hi, thanks for the content. I need put all states in a hook in all cases or this is flexible? The situation: I have only one useEffect on the component.

[@icodeit.juntao]

Hi @yurimutti6599. Just like other principles or patterns in software, there isn't such a thing that can apply to all cases. Although it's a better option when you have stateful logic and extract them into a commonplace, you should examine your usage. If the useEffect or any built-in hook can do the job and you're confident there isn't any similar usage of the stateful logic, then leaving it just in JS is totally fine. Also please note that you can always go back and do the refacotring when the duplication emerges.

[@wf6212]

great content, amazing!

[@icodeit.juntao]

Thanks Wei-Hang, appreciate it!

[@rickvian]

Hi Mr Juntao, thanks for sharing this knowlege, i am quite mindblown by this, i applied this in my project and it helps me a lot to separate business logic from the view layer! but, so far i try to figure out, we know in react we need to create new state, how do i take existing objects, and create new state from it ? coz spreading it into new state as usual, the object will lost its method

[@icodeit.juntao]

Hi @rickvian, thanks. Do you have a code example somewhere (like in a code sandbox) I can have a look, please? It seems you're facing a lifecycle issue with a model object? If that's the case, I would suggest trying to think about how you would do it in a backend application. By saying that, I mean the model should not be only a data container that holds some static fields, it should have behaviour and act as a real object that contains behaviour as well. In such case, the object can live inside a React context, for example, and can be referenced by other parts of the React application.