rendered more hooks than during the previous rende

1Rendered lesser hooks than the previous render.
2Rendered more hooks than the previous render.
3In both the cases thing can be like you have a conditional statement calling the same function which returns render from different places like both wrapped in a parent return function:
4
5const parentFunc = () => {
6    if(case==1)
7        return function_a();
8    if (case==2)
9        return function_b();
10}
11now function_a() could be a function creating two or one hook suppose useStyle() or anything else
12
13and function_b() could be a function creating no hook.
14
15Now, when parentFunc returns function_a() rendering one hook and function_b() rendering no hook then react will tell you that from the same render function two different renders were returned one with two or one hook and the other with one hook this disparity leads to the error. Error being
16
17less hooks were rendered. And the error is quite obvious.
18
19When cases are reversed and function_b() is returned first cause of the conditionals then react will tell you that from the same render function different renders were returned and error will be .
20
21Rendered more hooks than previous render.
22
23Now, Solution:
24
25Change the code flow like maybe create function_ab() which will ensure all the hooks being used are rendered and in that function:
26
27const function_ab = () => {
28    if(case==1)
29         return (<div></div>) //or whatever
30    if(case==2)
31         return (<div>I am 2 </div>) //or whatever
32}
33