Description

I have implemented a new useCharacterCount hook inspired by the existing useCharacterLimit functionality. This hook helps track the number of characters in real-time within text input fields or rich text editors.

Although useCharacterLimit and useCharacterCount are not typically used together, an issue arises when both hooks are used simultaneously, causing the following error:

ToolbarContext.tsx:100 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
I am currently facing difficulties resolving this issue and would appreciate help fixing it so that both hooks can work together. Also, I would like to ask whether it would be appropriate to submit a pull request for this.

You can find the implementation of the useCharacterCount hook here.

Impact

Text Input Validation: Track the number of characters a user types in real-time and display an alert when the character count exceeds a set limit.
Rich Text Editing: Track character count in a rich text editor as users type, which can be useful for applications like document editing.
Form Validation: Dynamically validate form inputs based on character count, ensuring the form is only submitted if the character count is within the allowed range.

I request that the useCharacterCount hook be improved to work seamlessly alongside useCharacterLimit, resolving the issue when both hooks are used together.