diff --git a/.eslintrc.js b/.eslintrc.js
index 6a5e2ec2833d3c92220c739acd7ef0944ab34e99..687caf210893fc4a7b84ed4d47c213cc1fddbf51 100644
--- a/.eslintrc.js
+++ b/.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',
diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js b/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
index 2eca69ce1f794c09eee3f8f799b9ef157d56bd9f..f1345eb30b04b10a9c3e6ea80818cd2cfb10d640 100644
--- a/packages/desktop-client/src/components/accounts/AccountSyncCheck.js
+++ b/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 =
diff --git a/packages/desktop-client/src/components/reports/CashFlow.js b/packages/desktop-client/src/components/reports/CashFlow.js
index 802ce26d0abeb7c7b66c4de0cebec874fd4ab1f8..5d5e64219b048402767be5c62ae7f1ee7b60b0e6 100644
--- a/packages/desktop-client/src/components/reports/CashFlow.js
+++ b/packages/desktop-client/src/components/reports/CashFlow.js
@@ -1,4 +1,4 @@
-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() {
diff --git a/packages/desktop-client/src/components/reports/NetWorth.js b/packages/desktop-client/src/components/reports/NetWorth.js
index 6c005433b07add9fd7558abea85582ecc4c25887..cc50c0a08806a156c28156148507a099db95b9b9 100644
--- a/packages/desktop-client/src/components/reports/NetWorth.js
+++ b/packages/desktop-client/src/components/reports/NetWorth.js
@@ -1,4 +1,4 @@
-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() {
diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
index 4270d0bccc0cf5dfc0a6a1a00cf0cce1670ac239..a9e79c37a38005a0725872388b649c1083bc733c 100644
--- a/packages/desktop-client/src/components/reports/Overview.js
+++ b/packages/desktop-client/src/components/reports/Overview.js
@@ -1,4 +1,4 @@
-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;
}
diff --git a/packages/desktop-client/src/components/reports/util.js b/packages/desktop-client/src/components/reports/util.js
index dbe6bb1a3e14cf45ccbc937efb37d6317720e7d5..9866fca32b48ade9ea4234aa47eaeb7f58797d13 100644
--- a/packages/desktop-client/src/components/reports/util.js
+++ b/packages/desktop-client/src/components/reports/util.js
@@ -1,13 +1,5 @@
-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);
}
diff --git a/packages/loot-design/src/components/RecurringSchedulePicker.js b/packages/loot-design/src/components/RecurringSchedulePicker.js
index 537bd898698c07cc604773d3a8dee0dd41c767ed..67fdcc604bbdae52d8454abbae64b39a0905e18e 100644
--- a/packages/loot-design/src/components/RecurringSchedulePicker.js
+++ b/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>;
diff --git a/packages/loot-design/src/components/sort.js b/packages/loot-design/src/components/sort.js
index e85ee646af553e050ccaa2b25b8f34d45c989a89..55c2abb99af0f2fa3960ab5ba3d8d0e91b2dedd6 100644
--- a/packages/loot-design/src/components/sort.js
+++ b/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);