import React from "react";
import { useRecoilState } from "recoil";
import { Industry, industryState } from "../atoms/industriesAtoms";
const useIndustryData = () => { const [industryStateValue, setIndustryStateValue] = useRecoilState(industryState); const onJoinOrLeaveIndustry = (industryData: Industry, isJoined: boolean) => { // is the user signed in // if not => open auth modal if (isJoined) { leaveIndustry(industryData.id); return; } joinIndustry(industryData); // onJoinOrLeaveIndustry; }; const joinIndustry = (industryData: Industry) => {}; const leaveIndustry = (industryId: string) => {}; return ( // data and functions, *industryStateValue,* onJoinOrLeaveIndustry );
};
export default useIndustryData;

I am working on the code above in a react project and I'm getting an error that Left side of comma operator is unused and has no side effects.ts(2695) in line 27 of the screenshot.

I want to understand why I am getting this error, and how I can resolve it.

I found a similar problem here, but the solution wasn't helpful in my own case.

4 Answers

This code:

return ( // data and functions, industryStateValue, onJoinOrLeaveIndustry
);

is equivalent to this:

return ( // data and functions, onJoinOrLeaveIndustry
);

...since industryStateValue is a simple variable, so evaluating it has no side-effects. The comma operator evaluates its left-hand operand, throws that value away, evaluates its right-hand operand, and then takes that value as its result.

If you meant to return both of those values, you have to wrap them in something. When it's just two or three like that, it's common to wrap them in an array:

return [ // <=== // data and functions, industryStateValue, onJoinOrLeaveIndustry
]; // <===

Then the code using the hooks can destructure into discrete variables, just like you do with useState or useRecoilState:

const [state, handler] = useIndustryData();

You can use an object instead of an array if you like, by using {} instead of []:

return { // <=== // data and functions, industryStateValue, onJoinOrLeaveIndustry
}; // <===

Then the code using it would use object destructuring ({} instead of []):

const { industryStateValue, onJoinOrLeaveIndustry } = useIndustryData();

For small numbers of values (say, three or fewer), the usual thing is to use an array like useState and useRecoilState do, because it's easier for the caller to control the names of the variable they destructure into. But for four or more values, an object is clearer because when you get into that many, positional destructuring can be hard to follow. Here's how a caller would use different names (state and handler as in the array examples) when destructuring an object:

const { industryStateValue: state, onJoinOrLeaveIndustry: handler } = useIndustryData();

2

I got this error by accidentally naming a new file .ts, instead of .tsx.

The file had JSX in it, and was causing issues with the linter (eslint) not recognizing the JSX as valid inside a JS Object.

Once I changed the file extension to .tsx, the linter calmed down, and recognized the object structure as valid. :)

Here is a simple example to show what was triggering the error in my case:

const getMenuItems = () => { return [ { type: 'link', title: 'List', link: '/agents/list', icon: { asset: <NavIcon icon={'rocket'} />, }, }, ];

Since the property asset contains JSX, the linter was throwing a fit when the file extension was .ts. With .tsx, everything was fine.

This, of course, is expected behavior, but it took me a minute to realize what was going on--especially since the error I was getting didn't really help pin-point the issue.

In my case, I had a little dangling comma hanging off of an element in a React short circuit evaluation.

const Component = () => { return ( <div> {condition && ( <p>Hello World</p>, )} </div> )
};

Tough to spot.

in my case, the problem was that i meant to have an object literal evalute dynamically, but instead i inadverdently created a block scope and what followed was not valid syntax anymore. i had a similar snippet to the following contrived example:

{ phone: () => console.log('phone'), email: () => console.log('email'),
}[magicField.type]();

the solution is to wrap the curly braces with parentheses so they are interpreted as an object literal, if that is your intention:

({ phone: () => console.log('phone'), email: () => console.log('email'),
})[magicField.type]();

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.