Bad state: Type mismatch between hooks: - previous hook: TabControllerHook - new hook: _SingleTickerProviderHook

[coderGirl9796]

I'm getting the error while I'm using tabController with Hookwidget. below is my TabControllerHook
class TabControllerHook extends Hook {
final int length;
final int initialIndex;

const TabControllerHook(this.length, this.initialIndex);

@OverRide
HookState<TabController, TabControllerHook> createState() {
return _TabControllerHookState();
}
}

class _TabControllerHookState extends HookState<TabController, TabControllerHook> {
@OverRide
build(BuildContext context) {
final tickerProvider = useSingleTickerProvider();
final controller = useMemoized(() => TabController(length: hook.length, vsync: tickerProvider, initialIndex: hook.initialIndex), [tickerProvider]);

useEffect(() {
  return controller.dispose;
}, [controller]);

return controller;

}
}

** and use the above hook in my home screen like below**
class Home extends HookWidget {

TabController tabController;
HomeViewModel viewModel;

@OverRide
Widget build(BuildContext context){
viewModel = useProvider(homeViewModel);
tabController = use(TabControllerHook(2, 0));

}
}

I don't understand from where this issue is generating?

[rrousselGit]

It's a regression. But I'm a bit busy at the moment. If it's urgent for you, feel free to make a PR

[joanofdart]

I was just messing around with a custom hook and I happen to come across the same issue.
What I could find is that if, in my case, I use useAnimation with my own hook, there's a type mismatch. If I just get the value from my hook, it works.

e.g:
this doesn't works, the UseAnimationHook overlaps my _AnimatedGradient hook.

  @override
  Gradient build(BuildContext context) {
    return useAnimation(animation.animate(controller));
  }

this works

  @override
  Gradient build(BuildContext context) {
    return animation.animate(controller).value;
  }

Or maybe I'm just totally lost 😆

[joanofdart]

Hmm, even if I dont directly return it from the build method, I still get an error while using a periodic timer through setState

- previous hook: _SingleTickerProviderHook
- new hook: _AnimatedGradient```

[coderGirl9796]

Any update on this issue?

[rrousselGit]

No not really.

I'd suggest using your hooks outside of HookState.build:

void useSomething() {
  final state = useState();
  use(MyHook());
}

instead of:

class MyHookState extends HookState<T> {
  @override
  void build(context) {
    final state = useState();
  }
}

That achieves the same effect.

Alternatively, you can try to make a PR to fix this issue. This is a low priority for me

[rrousselGit]

Closing in favor of #215