How to Create a Word Counter in React (with Hooks)

Last updated on March 2, 2023 A Goodman Loading... One comment

This practical article shows you how to create a word counter in React (in addition, we’re going to add a character counter, since it doesn’t take much effort).

A Quick Note

There is a common pitfall that some developers fall into when counting words in a given string. If you do as the code snippet below, it might produce inaccurate results in many cases:

const text = /* ... */;

// create array of words
const words = text.split(' ');

const wordCount = words.length;

// text = 'abc ' -> wordCount = 2
// text = '' -> wordCount = 1

Below is a proper approach to determining the number of words in a given string:

const text = /* ... */;

// create array of words
const words = text.split(' ');

let wordCount = 0;
words.forEach((word) => {
      if (word.trim() !== '') {

Counting characters in a given string is simple:

const text = /* ... */
const charCount = text.length;

Full Example

App Preview

The small demo we’re going to make has a textarea. When you type some text into this textarea, the number of words and the number of characters (including whitespace) will be displayed instantly:

The Code

1. To make sure we have the same starting point, let’s initialize a brand new React project:

npx create-react-app kindacode-example

2. The complete code in App.js (with explanations):

// src/App.js
import { useState, useEffect } from 'react';
import './App.css';

function App() {
  // the text entered by the user
  const [text, setText] = useState('');

  // word count
  const [wordCount, setWordCount] = useState(0);

  // character count
  const [charCount, setCharCount] = useState(0);

  const changeHandler = (event) => {

  useEffect(() => {
    // array of words
    const words = text.split(' ');

    // update word count
    let wordCount = 0;
    words.forEach((word) => {
      if (word.trim() !== '') {

    // update char count (including whitespaces)
  }, [text]);

  return (
    <div className='container'>
          placeholder='What is on your mind?'

          <p className='word-count'>Word Count: {wordCount}</p>
          <p className='char-count'>
            Character Count (Including Whitespaces): {charCount}

export default App;

3. And here’s all the CSS code in App.css:

.container {
    width: 80%;
    margin: 50px auto;

textarea {
    width: 400px;
    height: 100px;
    background: #eee;
    padding: 10px;
    border-radius: 10px;

.word-count {
    color: blue;
    font-weight: bold;

.char-count {
    color: red;
    font-weight: bold;

4. Run the project in the development mode:

npm start

And go to http://localhost:3000 to check your work.


We’ve implemented a word counter and a character counter with the useState and useEffect hooks. I hope you like the example. Try to modify the code, change some things, and see what happens.

The world of front-end development evolves so fast. Continue exploring more new and interesting stuff by taking a look at the following articles:

You can also check our React category page and React Native category page for the latest tutorials and examples.

Notify of
1 Comment
Inline Feedbacks
View all comments
taiful amin
taiful amin
1 month ago

thanks, it was very useful for me

Related Articles