React Native useEffect - Warning: An effect function must not return anything besides a function, which is used for clean-up

Question

I would like to implement a single function to check if a specific seat out 20 seats available is booked or not. If it is, it returns red and if it's not, a green is returned.

I implemented the fetch function as

const getSeatColor = (seat, vid) => {
    const [color, setColor] = useState(0);

    useEffect(async () => {
      const response = await fetch(
        `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`
      );
      const result = await response.json();
      setColor(result.message);
    }, []);

    return color;
  };

  const vid = 4;
  const seat1Color = getSeatColor(1, vid);
  const seat2Color = getSeatColor(2, vid);
  const seat3Color = getSeatColor(3, vid);
  const seat4Color = getSeatColor(4, vid);

return (
    <Screen style={{ paddingBottom: 5 }}>
         {/* Seat 1 starts */}
          <TouchableOpacity style={styles.seat} >
            <MaterialCommunityIcons name="seat" size={40} color={seat1Color} />
            <Button title="1" style={{ width: 20 }} color={seat1Color} />
          </TouchableOpacity>
          {/* Seat 1 ends */}
          {/* Seat 2 starts */}
          <TouchableOpacity style={styles.seat} >
            <MaterialCommunityIcons name="seat" size={40} color={seat2Color} />
            <Button title="2" style={{ width: 20 }} color={seat2Color} />
          </TouchableOpacity>
          {/* Seat 2 ends */}
          <View style={styles.seat}></View>
          <View style={styles.seat}></View>
          {/* Seat 3 starts */}
          <TouchableOpacity style={styles.seat} >
            <MaterialCommunityIcons name="seat" size={40} color={seat3Color} />
            <Button title="3" style={{ width: 20 }} color={seat3Color} />
          </TouchableOpacity>
     </Screen>
)

The green or red comes out ok but I get this Warning: An effect function must not return anything besides a function, which is used for clean-up.

I tried this How to call an async function inside a UseEffect() in React? but the same warning pops up. Please help or could there be another way to achieve this?

You're returning a promise using the async keyword directly as the callback argument — Carlos Franco, Jun 30 '21 at 20:11
Thank you @Carlos for the feedback and your time. Surely that was the problem. — Julius Peter Odeke, Jul 01 '21 at 08:03

score 0 · Answer 1 · answered Jun 30 '21 at 20:15

You're returning a promise using the async keyword directly as the callback argument. Try re-writing your useEffect like this:

    useEffect(() => {
    (async() => {
    const response = await fetch(
        `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`
      );
      const result = await response.json();
      setColor(result.message);
      })()
    }, []);

or wrap that code inside of another function and call it inside of useEffect

const fetchData = async () => {
const response = await fetch(
        `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`
      );
      const result = await response.json();
      setColor(result.message);
}
useEffect(() => {
    fetchData();
}, []);

Thank you @Carlos. Your first code snippet helped and also needed a return statement `const getSeatColor = (seat, vid) => { const [color, setColor] = useState(0); useEffect(() => { (async () => { const response = await fetch( `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}` ); const result = await response.json(); setColor(result.message); })(); }, []); return color; };` Thank you — Julius Peter Odeke, Jul 01 '21 at 08:16

score 0 · Answer 2 · answered Jun 30 '21 at 20:15

0

useEffect not accept async function.

You can try make this:

const getSeatColor = (seat, vid) => {
    const [color, setColor] = useState(0);

    useEffect(() => {
      (async => {
         const response = await fetch(`http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}`);
         const result = await response.json();
         setColor(result.message);
      })();
    }, []);

    return color;
};

answered Jun 30 '21 at 20:15

Dijalma Silva

1,478
1
7
7

1

Thank you @Dijalma Silva for the feedback and your time. Your code snippet helped, however async is to be taken out of () like. `..... useEffect(() => { (async () => { const response = await fetch( `http://192.168.8.100/dbops/actions/seat_status.php?seat=${seat}&vid=${vid}` ); const result = await response.json(); setColor(result.message); })(); }, []); return color; }; ` – Julius Peter Odeke Jul 01 '21 at 08:08

React Native useEffect - Warning: An effect function must not return anything besides a function, which is used for clean-up

2 Answers2