DEV Community

Krishna Bhamare
Krishna Bhamare

Posted on

React | Create a custom counter hook.

In React, a hook is a special function that allows you to "hook into" React features. Custom hooks are a way to reuse stateful logic between components.

Here's an example of a simple custom hook that keeps track of the number of times a button has been clicked:

Image description

This hook is a regular JavaScript function that happens to use the useState hook from React. It returns an object with two properties: count and increment. The count property is the current count and the increment method updates the count.

Here's an example of how you can use the useCounter hook in a component:

Image description

  • You can see, how useCounter hook is being imported and used inside the component Counter by calling it and then using the returned object count and increment methods.

  • In this example the component Counter use the hook useCounter on every re-render, which keep the current state of count, onClick event of the button increment the count and it will be reflected inside the component on re-rendering.

Thanks...!!!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more