. Advertisement .
..3..
. Advertisement .
..4..
When you try to add the code in the React and find the following message “Rendered more hooks than during the previous render”, it is a popular error in the React. Below is an effective solution to settle this problem discussed further in this post!
When does it happen?
Before answering the question for this problem, we need to identify the cause of the problem. When you try to install a value and that value will move to the state like (selectedPathway), it is related to another const as (countryLabel). This value is applied via the redux.
When setting the “selectedPatway”, the result need to display it in the <Select value={selectedPathway} />. This selection is getting back with the main element that it is binding the logic at all.
It seems to be working well but it is not as you expected. Why can we know it is not? Because when refreshing the page and checking in the browser, you found the following text: “Rendered more hooks than during the previous render”.
Which code are you using for this case? That is:
const DefaultValue = () => { let matchingOption = options.find((option) => option.value.includes(countryLabel)) let optionSelected = options.find((option) => option.value === value) const [selectedPathway, changeSelectedPathway] = useState(matchingOption) useEffect(() => { let test = [] if(matchingOption) { test = matchingOption } else { test = options[0] } changeSelectedPathway(test) },[countryLabel]) useEffect(() => { changeSelectedPathway(optionSelected) },[value]) return selectedPathway } return ( <Select value={DefaultValue()} /> )
How to settle the “Rendered more hooks than during the previous render” error?
You check the internet carefully and apply everything exactly but it is still the error. Even if you don’t call the hook tentatively and you also use the hook with the highest level. Let’s see our suggestion here.
While it is not causing the accurate error, the UsePrevious and countryHasChanged are the both of hooks. So don’t type these hooks like that because it has to begin with use by uppercase u.
I suggest you allow eslint and read the regulation of hooks in the react because it will show about the hooks violation that you may face in this subject. It also tells the place that the hook violation set off this original error.
Refer to this link to read more about the Rules of Hooks documentation.
Conclusion
We hope our solution for the “Rendered more hooks than during the previous render” error was beneficial! Please send us your ideas and concerns in the below comments section. However, if there is any better method that works well; send us to give a more appropriate method for you or community members in the future. Thank you for reading our article!
Leave a comment