How do I use a custom hook inside of useEffect?

Question

I'm working with Amazon's Chime SDK Component Library for React. The component library has a number of components and hooks available for use.

One of the component is <LocalVideo />. The problem is that it starts with the video disabled. In order to turn it on you use the hook useLocalVideo().

In the examples I've seen they use a button to execute the hook:

const MyComponent = () => {
  const togglevideo = { useLocalVideo };

  return(
    <>
      <LocalVideo />
      <button onClick={toggleVideo}>Toggle</button>
    </>
  );
};

This works fine. But what if I want the LocalVideo component to load enabled? e.g., if I don't want someone to have to click a button?

I've tried several different approaches including:

Add the code directly to the component (this doesn't work, I assume because the hook is called before the render with the LocalVideo component completes).
Adding the code inside useEffect (invalid Hook call errors).

For example:

const MyComponent = () => {
  useEffect( () => {
    useLocalVideo();
   },
  );

const MyComponent = () => {
  const { tileId, isVideoEnabled, setIsVideoEnabled, toggleVideo } = useLocalVideo();

  useEffect( () => {
    setIsVideoEnabled(true);
  }, []
 );

How can I make this hook run after the component renders?

Call the `toggleVideo` function inside of `useEffect` to invoke the call after the component renders. — Prajwal Kulkarni, Oct 01 '21 at 04:24

score 4 · Accepted Answer · answered Oct 01 '21 at 00:09

4

You should call the function toggleVideo inside the useEffect, not the hook useLocalVideo itself:

const MyComponent = () => {
  const { togglevideo } = useLocalVideo();

  useEffect(() => {
    togglevideo();
  }, []);

  return (
    <LocalVideo />
  );
};

answered Oct 01 '21 at 00:09

SniperHerz

142
1
6

I could swear I tried that! But, hey, it works - thanks so much! – Dave Mackey Oct 01 '21 at 15:04

How do I use a custom hook inside of useEffect?

1 Answers1