ESLint, Create React App and Unused Vars error - javascript

I have an application that is using CRA and having added redux into the mix I am now suddenly getting un-used vars linting errors when importing things like dispatch from redux.
Any help on why these might be coming back as unused would be really appreciated!

You don't need the second line:
import { dispatch } from 'redux'
dispatch is added when you connect a component with redux automatically.
The second import seems unneeded as well. The function that is making use of it is receiving it as part of its parameters already. The default state should be used to initialize the reducer instead.

Related

Next.js - TypeError: Cannot read properties of null (reading 'useMemo')

Since refactoring my code to move generic hooks and components to their own git submodules within my project I get TypeError: Cannot read properties of null (reading 'useMemo') whenever I call one of my custom hooks referring to useMemo.
I removed all the logic from a hook to make sure it didn't come from undefined arguments, so now my file looks like:
import { useMemo } from 'react'
export function useMyCustomHook() {
return useMemo(() => [], []) // Does nothing useful, but fails anyway
}
export function useMyCustomHookWithoutMemo() {
return [] // Does nothing useful, doesn't fail
}
I'm using next.js at the lastest version and
the project structure is like this:
components/
component.js (this is where I call useMyCustomHook imported from 'generics')
hooks/
pages/
index.js (returns component)
generics/
index.js (with export * from './hooks/useMyCustomHook')
hooks/
useMyCustomHook.js
I also have a jsconfig.json file with the following content, so I can write stuff like import Component from 'components/component':
{
"compilerOptions": {
"baseUrl": "."
}
}
Is next.js not compiling code in my generics folder? How can I get useMemo to work with this folder structure?
I tried moving useMyCustomHook.js to the hooks folder and it works there, so I'm guessing it has to do with a webpack config? I don't know much about those, that's why I love next.js
I started from scratch and moved files one by one into a libs folder, and added paths in jsconfig.json so I wouldn't have long imports into my libs and it seems to work for now. Probably a bug with next.js, webpack and git submodules
maybe you can add a console line after import line to ensure if useMemo exist. like this:
import { useMemo } from 'react';
console.log(useMemo);
the point is to find the variable whose value is null.
This might be a case of circular imports in your code. Webpack doesn't handle them well.
Make sure that you're not importing from components folder to generics or hooks. Try to run no-cycle eslint rule on your app, it might help to identify those: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md
useMemo() is available for react 16.8.6+, So if your react is not updated, you should update it, otherwise, i would try something like:
useMemo(()=>console.log("test),[])
and check dev tab in browser.
For me the issue was that had placed the useMemo out of the function component by mistake

React Component - Cannot read properties of null (reading 'useState')

I am building a little local dev/testing/documentation environment for some components which are used across different projects and so want to create them as individual npm packages.
Everything was working perfectly until I tried to use useState() in one of the components. Add this created the following errors:
Invalid hook call. Hooks can only be called inside of the body of a function component.
TypeError: Cannot read properties of null (reading 'useState')
I feel this is strange and I can't figure out what is causing it. I also tested with other hooks to see if it was just useState that was the problem but others such as useEffect and useRef also have the same problem.
Project structure is:
/components (the components to develop/test/document
/component-group
/Component
index.js
Component.js
component.scss
package.json
/library (where all the components are developed/tested/documented)
/component1
/component2
/etc (all the components that make up the library)
webpack.config.js
package.json
etc...
Components are imported into the library using a relative path because I don't won't to have to publish them to npm and update the version locally every time a change is made and needs to be tested.
As for the code for the component where useState is causing problems, this is a basic version which still causes problems:
import React, { useState } from 'react';
const TestComponent = () => {
const [testState, setTestState] = useState("testing");
return (
<p>Hello World</p>
)
}
export default TestComponent
If I comment out the useState line then Hello World is displayed, if I uncomment the line then the errors appear.
Any ideas as to what might be wrong would be really appreciated.
Thank you in advance!

How to prevent re-render caused because of calling hook useSelector()?

EDIT It caused by <React.StrictMode></React.StrictMode> in index.js. I am not sure why but it is odd.
I noticed hook useSelector() caused the app re-render needlessly. Is this expected? If yes, should I drop using redux-toolkit-js?
I haven't tested this behavior on React Native but I think re-rendering in React Native will become an issue.
Hook useSelector caused the app to re-render 2 times more and it compounds, meaning If the app without Redux will re-render only 2 times, caused by a state update, simply calling useSelector() will cause the app to re-render 4 times.
This is the steps I took to reproduce the problem:
npx create-react-app my-app --template redux
cd my-app
npm start
add console.log in App.js and features/counter/Counter.js
let i = 0;
function App() {
i++
console.log("App()", i)
...
}
Check your browser DevTools's console.
React does an extra render in development environments in strict mode to help you find bugs and do some checks for you. It doesn't do this in a production build.
From the docs for strict mode:
Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:
Class component constructor, render, and shouldComponentUpdate methods
Class component static getDerivedStateFromProps method
Function component bodies
State updater functions (the first argument to setState)
Functions passed to useState, useMemo, or useReducer

Variable imported, but gives import error when used ReactJS Redux

I am working on ReactJS and Redux. I have a file named actionTypes.js. In this file, I have the following export statement:
export const REGISTER_USER = 'REGISTER_USER';
Now, I import it in registerReducer.js with the statement:
import {REGISTER_USER} from '../actions/actionTypes';
However, when I use this REGISTER_USER variable in my registerReducer.js file, it gives the following error:
Attempted import error: 'REGISTER_USER' is not exported from '../actions/actionTypes'.
When I only import REGISTER_USER but not use it, then the warning declared but not used is issued. I am unable to understand the problem.
Note: All the paths and variable names are correct. I have verified it many times.
It might have been a bundling issue with webpack. I have ran into this issue before using react v16.10.2. I haven't seen this issue in a while though. A simple restarting/rebundling might have solved this for you.
The problem is resolved. No code changes were needed. I just created another dummy variable in actionTypes.js and then removed that variable. Everything remained same and the code executed successfully. God knows how it happened.

Importing external React components to nextJS project

I have a functional component in my own library that I'm importing into a nextJS project, and for some reason it's not recognized as a react functional component.
Example of my library code:
import React, { useState } from 'react';
export function Dialog(){
const [open, setOpen] = useState(false);
return (<>
// some jsx logic
</>)
}
importing it in my nextJS component:
import { Dialog } from '#myNamespace/library';
When I try to use
<Dialog />
I get this error:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.
So I logged out a local react component with the Dialog and found that while the local react component seems to be on the namespace react__WEBPACK_IMPORTED_MODULE_1___default, my imported component just remains a plain function instead of a react component.
Any ideas as to why NextJS isn't importing my function as a react component?
EDIT:
Here's something really interesting: When I remove the hook, nextJS seems to think it is a react component. But when I put the hook in, it doesn't - and throws that error.
SOLUTION
For anyone who's interested - the issue was that my package was npm link into my project. So in that case there's issues with it not packaging up the components correctly.
It is possible that your react and react-dom isn't updated to the standard for hooks try yarn add react#18.6 react-dom#18.6

Categories