Do you remember when the trend in the React ecosystem was to separate concerns using a different component to hold the logic and another component to render the presentation?

If you do remember, it means you have been using React for a long time. If you have no idea what I am talking about, then I will say you haven’t missed out on much because React has kind of moved on and caught a new vibe: hooks.

Even before hooks were introduced in version 16.8, the React ecosystem had long gravitated towards the functional component approach. But with hooks, it has been a revolution. Most of the popular React libraries have had to either rewrite their code or include hook-compliant approaches to using them.

React hooks have been so inspiring that other frameworks such as Vue.js are beginning to take a page from the concept.

Image for post

React components can become complex in a hurry, which can make it difficult to test or debug. Therefore, it would be nice to apply the Unix philosophy that promotes the idea of doing one thing well. We can detach all the logic from a component and create a custom React hook to hold it, which implies that we have separated the logic from the presentation. This makes code refactoring super easy. If you need to change what your app looks like, you can simply work on the presentation aspect. If your logic needs to be improved, you will not have to alter your presentation.

#javascript #js #react #reactjs #programming

Give Your React App Wings to Fly With Custom Hooks
1.10 GEEK