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?

Well, somewhere you have code that does something like "cond1 || cond2 && cond3" where it needs to instead do "(cond1 || cond2) && cond3" or "cond1 || (cond2 && cond3)". Where is the lint warning/error pointing to in your code? — Drew Reese, Feb 09 '21 at 09:16
There are no conditions. The warning appears in IDE's console and the browser. — Nick, Feb 09 '21 at 09:18
I've just deleted IDE's cache, not sure what was going on. All good now. — Nick, Feb 09 '21 at 09:22

score 6 · Accepted Answer · answered Feb 09 '21 at 09:22

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

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

1 Answers1