re-enable react-hooks/rules-of-hooks eslint rule (#715)

.eslintrc.js

@@ -17,7 +17,6 @@ module.exports = {
     // TODO: re-enable these rules
     'import/no-anonymous-default-export': 'off',
     'react/destructuring-assignment': 'off',
-    'react-hooks/rules-of-hooks': 'off',
     'react-hooks/exhaustive-deps': 'off',
 
     'import/no-useless-path-segments': 'error',

packages/desktop-client/src/components/accounts/AccountSyncCheck.js

@@ -69,6 +69,7 @@ function AccountSyncCheck({
   getAccounts,
   addNotification,
 }) {
+  let [open, setOpen] = useState(false);
   if (!failedAccounts) {
     return null;
   }
@@ -78,8 +79,6 @@ function AccountSyncCheck({
     return null;
   }
 
-  let [open, setOpen] = useState(false);
-
   let account = accounts.find(account => account.id === id);
   let { type, code } = error;
   let showAuth =

packages/desktop-client/src/components/reports/CashFlow.js

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 
 import * as d from 'date-fns';
 
@@ -19,7 +19,6 @@ import { cashFlowByDate } from './graphs/cash-flow-spreadsheet';
 import CashFlowGraph from './graphs/CashFlowGraph';
 import Header from './Header';
 import useReport from './useReport';
-import { useArgsMemo } from './util';
 
 function CashFlow() {
   const [allMonths, setAllMonths] = useState(null);
@@ -36,10 +35,11 @@ function CashFlow() {
     return numDays > 31 * 3;
   });
 
-  const data = useReport(
-    'cash_flow',
-    useArgsMemo(cashFlowByDate)(start, end, isConcise),
+  const params = useMemo(
+    () => cashFlowByDate(start, end, isConcise),
+    [start, end, isConcise],
   );
+  const data = useReport('cash_flow', params);
 
   useEffect(() => {
     async function run() {

packages/desktop-client/src/components/reports/NetWorth.js

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { connect } from 'react-redux';
 
 import * as d from 'date-fns';
@@ -16,7 +16,7 @@ import netWorthSpreadsheet from './graphs/net-worth-spreadsheet';
 import NetWorthGraph from './graphs/NetWorthGraph';
 import Header from './Header';
 import useReport from './useReport';
-import { fromDateRepr, useArgsMemo } from './util';
+import { fromDateRepr } from './util';
 
 function NetWorth({ accounts }) {
   const [allMonths, setAllMonths] = useState(null);
@@ -25,10 +25,11 @@ function NetWorth({ accounts }) {
   );
   const [end, setEnd] = useState(monthUtils.currentMonth());
 
-  const data = useReport(
-    'net_worth',
-    useArgsMemo(netWorthSpreadsheet)(start, end, accounts),
+  const params = useMemo(
+    () => netWorthSpreadsheet(start, end, accounts),
+    [start, end, accounts],
   );
+  const data = useReport('net_worth', params);
 
   useEffect(() => {
     async function run() {

packages/desktop-client/src/components/reports/Overview.js

-import React from 'react';
+import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 
 import { bindActionCreators } from 'redux';
@@ -19,7 +19,6 @@ import netWorthSpreadsheet from './graphs/net-worth-spreadsheet';
 import NetWorthGraph from './graphs/NetWorthGraph';
 import Tooltip from './Tooltip';
 import useReport from './useReport';
-import { useArgsMemo } from './util';
 
 function Card({ flex, to, style, children }) {
   const containerProps = { flex, margin: 15 };
@@ -63,10 +62,11 @@ function NetWorthCard({ accounts }) {
   const end = monthUtils.currentMonth();
   const start = monthUtils.subMonths(end, 5);
 
-  const data = useReport(
-    'net_worth',
-    useArgsMemo(netWorthSpreadsheet)(start, end, accounts),
+  const params = useMemo(
+    () => netWorthSpreadsheet(start, end, accounts),
+    [start, end, accounts],
   );
+  const data = useReport('net_worth', params);
 
   if (!data) {
     return null;
@@ -114,10 +114,8 @@ function CashFlowCard() {
   const end = monthUtils.currentDay();
   const start = monthUtils.currentMonth() + '-01';
 
-  const data = useReport(
-    'cash_flow_simple',
-    useArgsMemo(simpleCashFlow)(start, end),
-  );
+  const params = useMemo(() => simpleCashFlow(start, end), [start, end]);
+  const data = useReport('cash_flow_simple', params);
   if (!data) {
     return null;
   }

packages/desktop-client/src/components/reports/util.js

-import { useMemo } from 'react';
-
 import { runQuery } from 'loot-core/src/client/query-helpers';
 
-export function useArgsMemo(func) {
-  return (...args) => {
-    return useMemo(() => func(...args), args);
-  };
-}
-
 export function fromDateRepr(date) {
   return date.slice(0, 7);
 }

packages/loot-design/src/components/RecurringSchedulePicker.js

@@ -130,15 +130,16 @@ function reducer(state, action) {
 }
 
 function SchedulePreview({ previewDates }) {
+  const dateFormat = useSelector(state =>
+    (state.prefs.local.dateFormat || 'MM/dd/yyyy')
+      .replace('MM', 'M')
+      .replace('dd', 'd'),
+  );
+
   if (!previewDates) {
     return null;
   }
 
-  let dateFormat = useSelector(
-    state => state.prefs.local.dateFormat || 'MM/dd/yyyy',
-  );
-  dateFormat = dateFormat.replace('MM', 'M').replace('dd', 'd');
-
   let content = null;
   if (typeof previewDates === 'string') {
     content = <Text>{previewDates}</Text>;

packages/loot-design/src/components/sort.js

@@ -109,11 +109,12 @@ export function useDroppable({ types, id, onDrop, onLongHover }) {
 export const DropHighlightPosContext = React.createContext(null);
 
 export function DropHighlight({ pos, offset = {} }) {
+  let itemPos = useContext(DropHighlightPosContext);
+
   if (pos == null) {
     return null;
   }
 
-  let itemPos = useContext(DropHighlightPosContext);
   let topOffset = (itemPos === 'first' ? 2 : 0) + (offset.top || 0);
   let bottomOffset = (itemPos === 'last' ? 2 : 0) + (offset.bottom || 0);