React event listeners with useEffect

Question

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [theRoom, setRoom] = useState(null);

  const updateVideoDevice = (e) => {
    console.log("room", theRoom);
  };

  const createRoom = () => {
    console.log("we change the room", theRoom);
    setRoom({
      localparticipants: {}
    });
    console.log("we change the room after", theRoom);
  };

  useEffect(() => {
    const select = document.getElementById("video-devices");
    select.addEventListener("change", updateVideoDevice);
  }, []);
  return (
    <div className="App">
      <select id="video-devices">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <button onClick={createRoom}>change obj</button>
    </div>
  );
}

I have this codebase. When I press the change obj button for the first time it doesn't set theRoom to the object

{
          localparticipants: {}
        }

But when I press the button for the second time it does, and after that, I try to change the select element's options I got null for the console log in the updateVideoDevice function.

How do I solve these two issues with React?

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — jonrsharpe, Nov 30 '20 at 12:14

score 0 · Answer 1 · answered Nov 30 '20 at 12:23

const [theRoom, setRoom] = useState(null);

setRoom is asynchronous function, so you will not see the change immediately.

Also, you don't need to add event listener to select tag. You can simply use onChange method. So remove all with useEffect and then change the code as below.

<select id="video-devices" onChange={updateVideoDevice}>

score 0 · Answer 2 · answered Nov 30 '20 at 12:25

0

you need to chnage how you call the onclick method so it's look like this:

<button onClick={()=>createRoom()}>change obj</button>

answered Nov 30 '20 at 12:25

TalOrlanczyk

1,205
7
21

score 0 · Answer 3 · answered Nov 30 '20 at 12:29

Here's a working solution:

setRoom is asynchronous so your 2 console.log(theRoom) can't show the right value while you're still in the function.
to handle the select change value, you can use the onChange React prop that allows you to catch every value change of a hook
I put you 2 console.login a useEffect to allow you to see the changes of the theRoom and selectValue values

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [theRoom, setRoom] = useState(null);
  const [selectValue, setSelectValue] = useState(null);

  const createRoom = () => {
    setRoom({
      localparticipants: {}
    });
  };

  // everytime selectValue or theRoom values changed, this trigger this
  useEffect(() => {
    console.log(selectValue);
    console.log(theRoom);
  }, [selectValue, theRoom]);

  return (
    <div className="App">
      <select
        id="video-devices"
        onChange={(e) => setSelectValue(e.target.value)}
        value={selectValue}
      >
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <button onClick={createRoom}>change obj</button>
    </div>
  );
}

React event listeners with useEffect

3 Answers3