В жизненном цикле хуки реагируют, когда вы обновляете состояние, выполняется ли функция компонента повторно?

Я спрашиваю, потому что у меня есть консольный журнал в основной функции компонента, и каждый раз, когда я меняю состояние, когда консоль выполняется.

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

function App() {
  const [bgPostColor, setBgPostColor] = useState(undefined);
  const numbers = [1,2,3,,4,5];  


  const changeBgColorPost = number => { 
    switch (number) 
    { case 2: setBgPostColor("blue"); break;
      case 3: setBgPostColor("green"); break;
      case 4: setBgPostColor("yellow"); break;
      case 5: setBgPostColor("red"); break;    
      default: setBgPostColor("white"); break;
    }
  }

  const listItems = numbers.map( number => 
    <span key={number}>

      <label 
      className={"radioLabel radio-"+number} htmlFor={"radio-"+number} onClick={ () => changeBgColorPost(number) }>
      </label>
      <input name="category" style={{ display: 'none' }} type="radio" id={"radio-"+number}/>

    </span>
  )


  console.log("posts")


  return (
      <div>
        <div className="categories">
          {listItems}
        </div>
        <textarea placeholder="Escribe aqui pues, ramon" name="" id="" style={{ background: `${bgPostColor}` }}></textarea>
    </div>
  )

}
export default App;

там добавляется код.

Также к этому компоненту у меня есть запрос через axios, чтобы получить список постов, и я выполняю его в рамках «useEffect», но я не считаю важным размещать его здесь