Added react-hooks lint rules

This commit is contained in:
Mark McDowall 2022-11-04 14:16:11 -07:00
parent b1962c7366
commit 381d642593
4 changed files with 11 additions and 7 deletions

View File

@ -39,6 +39,7 @@ module.exports = {
plugins: [ plugins: [
'filenames', 'filenames',
'react', 'react',
'react-hooks',
'simple-import-sort', 'simple-import-sort',
'import' 'import'
], ],
@ -308,7 +309,9 @@ module.exports = {
'react/react-in-jsx-scope': 2, 'react/react-in-jsx-scope': 2,
'react/self-closing-comp': 2, 'react/self-closing-comp': 2,
'react/sort-comp': 2, 'react/sort-comp': 2,
'react/jsx-wrap-multilines': 2 'react/jsx-wrap-multilines': 2,
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error'
}, },
overrides: [ overrides: [
{ {

View File

@ -1,5 +1,5 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { Fragment, useEffect } from 'react'; import React, { Fragment, useCallback, useEffect } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import themes from 'Styles/Themes'; import themes from 'Styles/Themes';
@ -19,7 +19,8 @@ function createMapStateToProps() {
function ApplyTheme({ theme, children }) { function ApplyTheme({ theme, children }) {
// Update the CSS Variables // Update the CSS Variables
function updateCSSVariables() {
const updateCSSVariables = useCallback(() => {
const arrayOfVariableKeys = Object.keys(themes[theme]); const arrayOfVariableKeys = Object.keys(themes[theme]);
const arrayOfVariableValues = Object.values(themes[theme]); const arrayOfVariableValues = Object.values(themes[theme]);
@ -31,12 +32,12 @@ function ApplyTheme({ theme, children }) {
arrayOfVariableValues[index] arrayOfVariableValues[index]
); );
}); });
} }, [theme]);
// On Component Mount and Component Update // On Component Mount and Component Update
useEffect(() => { useEffect(() => {
updateCSSVariables(theme); updateCSSVariables(theme);
}, [theme]); }, [updateCSSVariables, theme]);
return <Fragment>{children}</Fragment>; return <Fragment>{children}</Fragment>;
} }

View File

@ -33,7 +33,7 @@ function ConfirmModal(props) {
return () => unbindShortcut('enter', onConfirm); return () => unbindShortcut('enter', onConfirm);
} }
}, [isOpen, onConfirm]); }, [bindShortcut, unbindShortcut, isOpen, onConfirm]);
return ( return (
<Modal <Modal

View File

@ -19,7 +19,7 @@ function PendingChangesModal(props) {
useEffect(() => { useEffect(() => {
bindShortcut('enter', onConfirm); bindShortcut('enter', onConfirm);
}, [onConfirm]); }, [bindShortcut, onConfirm]);
return ( return (
<Modal <Modal