Custom react hooks with JSX

Egor Stronhin — Tue, 26 Jul 2022 06:19:29 +0000

Over time our react components become bigger and bigger. The easiest way to fix it is to create more small components. But what to do with components which require some methods or states?

Problem

Let’s take, for example, the modal component. To open and close this component, we need to write the following code during each use

Solution

Let’s wrap now all logic related to toggle modal state to a custom hook

You can continue to use modal props like text and change them during application runtime

Let’s refactor components with the new custom hook

Your code now looks much cleaner!

Codesandbox playground

DEV Community: Egor Stronhin

Custom react hooks with JSX