DEV Community

Discussion on: React: useEffect

Collapse
 
koralarts profile image
Karl Castillo

I haven't had the issue of having a limit with React Hooks. I do, however; have seen too many re-render issues. If you have an example, that would help narrow down the question.

As far as I understand, hooks will be called every time your component re-render as they're still regular functions. Whether or not your callback gets called is totally determined by the rules of useEffect.

Collapse
 
ponyjackal profile image
ponyjackal

Oh, Right
Re-render issue, I think
I want to know what is caused by and how to solve this

Thanks in advance.

Thread Thread
 
koralarts profile image
Karl Castillo • Edited

Let's say you have a useState which returns a setter that we named setValue. If we call setValue outside of any function in our component, it would cause a re-render issue.

const App = () => {
  const [value, setValue] = useState('')
  setValue('value')
  return <p>{value}</p>
}

Another way that would cause this is if two useEffect depend on a value that the other updates.

const [value1, setValue1] = useState('')
const [value2, setValue2] = useState('')
useEffect(() => {
  setValue1('value1')
}, [value2])

useEffect(() => {
  setValue2('value2')
}, [value1])

For more information, you can look at Rules of Hooks

Thread Thread
 
ponyjackal profile image
ponyjackal

Thanks,
It really helps me a great deal.
Appreciate you

Thread Thread
 
ponyjackal profile image
ponyjackal

Thanks, Karl
This really helps me a great deal.
Appreciate your help