Separate Logic From UI In React (Hooks) 💡 #reactjs #reactdeveloper #frontend #frontenddeveloper

How to clean up your React components by extracting state & logic into a custom hook.

📣 Follow Coding in Flow on social media:

[ban_droid]

normal terms: controller
react enthusiast: "hooks, take it or leave it"

Perfect content as usual, thank you ☺️

[Filer]

Custom hooks are good for separating logic. But the main problem occurs when you need to separate logic and ui for reuse. Thus we have a rule in our team. If the logic is inseparable with ui - we use custom hooks, otherwise, we create UI component and conrainers for it with all the logic needed

[mazen.alsenih]

As always, cool man, thanks for sharing!

[sarojregmi]

Thanks for sharing man. It will be useful

[zachariahtatman]

Tbh that’s not really necessary unless the file is HUGE…. It’s a good example though! IMO, for smaller files where logic and ui live together, it’s rather helpful to see what the state does in relation to the rendering logic. Imagine having to contextually switch your attention between files if you did this for every react component with some amount of logic. Some people might be ok with that but personally I would find it draining lol 😅

[mohammadalrefaai]

And now the page is testable by writing units test for the hook

[omnilothar]

does it have to be in hook? or just a helper file for just function group

[raves_r]

When you were still learning react how much time did you spend making projects and studying?

[EliSpizzichino]

I'm so sorry for you guys still forced to use react
(Svelte 5 is out)

[rujor]

Step 1: Switch to Angular.

You're welcome. 😉

[Edgar-pulc]

useeffect is unnecessary in my opinion, you can add data to local storage directly in functions

[Prosheng]

Wow, how did you learn such much knowledge?

[masumasi]

Don't use react. All problems solved.