0

I the next code I have this problem with Small component because always is print two time, even when the component is created first time

App.js

import { useCounter } from "../Hooks/useCounter";
import { Small } from "./Small";

export const Memorize = () => {
  const {counter, increment} = useCounter(10)

  return(
    <>
      <Small value={counter}/>
      <button
        onClick={event => increment()}>
        +1
      </button>
    </>
  )
}

useCounter.js The counter value is working fine...

import { useState } from "react";

export const useCounter = (initialValue = 0) => {
  const [counter, setCounter] = useState(initialValue)

  const increment = (value = 1) => setCounter(counter + value)

  return {
    counter,
    increment,
    setCounter
  }
}

Small.js ... here the problem or I dont know...

export const Small = ({value}) => {
  console.log('Iam console log...');

  return (
    <small>{value}</small>
  )
}

... each time that I do click in button +1 this console is print:

Iam console log...
Iam console log...

... I try to envolve with memo but doesnt works... any ideas ?

Hector
  • 636
  • 8
  • 16
  • 1
    Probably because of the Strict Mode is on. Try remove `` in index.js. but you should not use console log to measure performance of your components. Use a proper tool like React Profiler. – Dilshan Jun 27 '23 at 04:01

1 Answers1

3

Probably because of the Strict Mode is on. Try remove in index.js.

When <StrictMode> is enabled the component will render two times, that's why its render two console.log()

Kannu Mandora
  • 479
  • 2
  • 10