Unexpected mix of '||' and '&&' no-mixed-operators

Question

I have the following hook and we use it to bind to channels.

import { useEffect, useState } from "react";
import { Channel, PresenceChannel } from "pusher-js";
import PrivateChannel from 'pusher-js/types/src/core/channels/private_channel';
import { usePusher } from "./usePusher";

export type ChannelType = PrivateChannel | PresenceChannel

function _useChannel<T extends ChannelType>(channelName: string) {
    const pusher = usePusher()
    const [channel, setChannel] = useState<T>();

    useEffect(() => {
        const pusherChannel = pusher.subscribe(channelName) as T;
        setChannel(pusherChannel);

        return () => pusher?.unsubscribe(channelName);
    }, [channelName, pusher]);

    return channel;
}

When I open the console, I see this message: Unexpected mix of '||' and '&&' no-mixed-operators

Why does this happen?

Answer 1

As @Drew Reese said, you have somewhere a complex logic expression mixing && and ||, and you have configured ESLint to warn you if that happens. You will have to find where that's happening, and add the necessary parenthesis to clarify your intention.

From ESLint docs

var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
var foo = a && b ? c : d;      /*BAD: Unexpected mix of '&&' and '?:'.*/
var foo = (a && b) ? c : d;    /*GOOD*/
var foo = (a && b) || c || d;  /*GOOD*/
var foo = a && (b || c || d);  /*GOOD*/

If you are uncertain about what the correct precedence of boolean operators should be, think that && can be thought as the equivalent of multiplication and || as addition, thus && takes precedence over ||

For example:

a && b || c || d 
<=> a*b + c + d 
<=> (a && b) || c || d