Error/React.js

[React] Too many re-renders. React limits the number of renders to prevent an infinite loop

IT공부블로그 2019. 12. 7. 15:02
728x90
반응형
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { useState } from 'react';
 
const Counter = () => {
 
    const [value, setValue] = useState(0);
    
    return (
        <div>
            <div>{value}</div>
            <button onClick={setValue(value + 1)}>+1</button>
            <button onClick={setValue(value - 1)}>-1</button>
        </div>
    )
}
 
export default Counter;
cs

위 코드 작성시 발생한 에러


1
<button onClick={() => setValue(value + 1)}>+1</button>
cs

위 코드가 렌더될때 함수가 실행되는데 state를 변화하는 함수임으로 계속 렌더되서 발생한 에러


1
<button onClick={() => setValue(value + 1)}>+1</button>
cs

위 코드로 수정하여 해결

728x90
반응형