Custom Hooks in React and React Native

Hello to all development enthusiasts! Have you ever faced cumbersome business logic in your React or React Native components? Or have you ever wondered if there was a more efficient way to reuse certain business logic without reinventing the wheel? If so, this article will enlighten you on Custom Hooks.

Custom Hooks are an innovative solution for encapsulating and efficiently reusing business logic in our components. They are not intrinsic elements of React, but functions that we define to centralize common logic while leveraging the benefits of native Hooks such as useState and useEffect.

When is it wise to introduce a Custom Hook? Ideally, whenever a specific logic is likely to be reused across multiple components or if this logic makes the component unreadable. For example, consider an application with different subscription levels: Free, Pro, and Premium. A Custom Hook named useUserRights could be developed to provide information on the user's membership level, access to an article, or even chat access. This is the kind of logic that could be called in multiple places. Here, for example, without using a Custom Hook to check certain user rights in order to modify the in-app display, we would do something like: