use-deep-compare

Author: klappy

package.json

@@ -18,6 +18,7 @@
     "localforage": "1.7.3",
     "markdown-translatable": "1.3.1-rc.1",
     "prop-types": "15.7.2",
+    "use-deep-compare": "^1.1.0",
     "use-deep-compare-effect": "^1.3.1",
     "utf8": "3.0.0"
   },

src/components/authentication/useAuthentication.js

@@ -11,6 +11,7 @@ import {
   ERROR_NETWORK_DISCONNECTED,
 } from '../../core';
 import { LoginForm } from '.';
+import { useDeepCompareCallback, useDeepCompareEffect, useDeepCompareMemo } from 'use-deep-compare';
 
 function useAuthentication({
   messages,
@@ -58,7 +59,7 @@ function useAuthentication({
     }
   }, [onAuthentication, saveAuthentication]);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (!authentication && loadAuthentication) {
       loadAuthentication().then(_authentication => {
         if (_authentication) {
@@ -68,7 +69,7 @@ function useAuthentication({
     }
   }, [authentication, loadAuthentication, update]);
 
-  const onSubmitLogin = useCallback(async ({
+  const onSubmitLogin = useDeepCompareCallback(async ({
     username, password, remember,
   }) => {
     try {
@@ -105,7 +106,7 @@ function useAuthentication({
     messages.genericError, messages.networkError, messages.passwordError, messages.serverError, messages.usernameError,
   ]);
 
-  const onSubmit = useCallback(async ({
+  const onSubmit = useDeepCompareCallback(async ({
     username, password, remember,
   }) => {
     if (authentication) {
@@ -116,7 +117,7 @@ function useAuthentication({
     }
   }, [authentication, config, logout, update, onSubmitLogin]);
 
-  const component = useMemo(() => (
+  const component = useDeepCompareMemo(() => (
     config && (
       <LoginForm
         config={config}

src/components/file/File.context.js

@@ -33,8 +33,15 @@ export function FileContextProvider({
     config: _config || contextConfig,
     authentication: _authentication || contextAuthentication,
     repository: _repository || contextRepository,
-    filepath, onFilepath, defaultContent, create, onOpenValidation, onConfirmClose,
-    onLoadCache, onSaveCache, releaseFlag,
+    filepath,
+    onFilepath,
+    defaultContent,
+    create,
+    onOpenValidation,
+    onConfirmClose,
+    onLoadCache,
+    onSaveCache,
+    releaseFlag,
   });
 
   const context = {

src/components/file/useFile.js

@@ -1,9 +1,12 @@
 import React, {
-  useState, useCallback, useContext,
-  useEffect, useMemo
+  useState,
+  useCallback,
+  useContext,
+  useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useDeepCompareCallback } from 'use-deep-compare';
 
 import {
   getContentFromFile, saveFile, ensureFile, deleteFile,
@@ -37,7 +40,7 @@ function useFile({
   const branch = repository && (repository.branch || repository.default_branch);
   const [deleted, setDeleted] = useState();
 
-  const _setBlob = useCallback(async (_blob) => {
+  const _setBlob = useDeepCompareCallback(async (_blob) => {
     if (blob && _blob && typeof onConfirmClose == 'function') {
       const confirm = await onConfirmClose()
 
@@ -71,7 +74,7 @@ function useFile({
     };
   }, [onFilepath]);
 
-  const load = useCallback(async () => {
+  const load = useDeepCompareCallback(async () => {
     if (config && repository && filepath) {
       const _file = await ensureFile({
         filepath, defaultContent, authentication, config, repository, branch, onOpenValidation,
@@ -80,8 +83,7 @@ function useFile({
       console.log("ensureFile:", _file);
 
       let defaultCachedContentFile;
-      if (onLoadCache && _file && _file.html_url)
-      {
+      if (onLoadCache && _file && _file.html_url) {
         defaultCachedContentFile = await onLoadCache({authentication, repository, branch, html_url: _file.html_url, file: _file});
       }
 
@@ -113,7 +115,7 @@ function useFile({
       defaultContent, authentication, branch, onOpenValidation
   ]);
 
-  const createFile = useCallback(async ({
+  const createFile = useDeepCompareCallback(async ({
     branch: _branch, filepath: _filepath, defaultContent: _defaultContent, onOpenValidation,
   }) => {
     if (config && repository) {
@@ -132,7 +134,7 @@ function useFile({
     }
   }, [authentication, config, repository, updateBranch, onFilepath]);
 
-  const close = useCallback(() => {
+  const close = useDeepCompareCallback(() => {
     if (blobActions && blobActions.close) {
       blobActions.close();
     };
@@ -143,13 +145,13 @@ function useFile({
     update();
   }, [update, blobActions, onFilepath]);
 
-  const saveCache = useCallback(async (content) => {
+  const saveCache = useDeepCompareCallback(async (content) => {
     if (onSaveCache) {
       await onSaveCache({authentication, repository, branch, file, content});
     }
   }, [writeable, authentication, repository, branch, file, onSaveCache]);
 
-  const save = useCallback(async (content) => {
+  const save = useDeepCompareCallback(async (content) => {
     //console.log("GRT save // will save file");
     await saveFile({
       authentication, repository, branch, file, content,
@@ -163,7 +165,7 @@ function useFile({
     );
   }, [writeable, authentication, repository, branch, file, load, saveFile, saveCache]);
 
-  const dangerouslyDelete = useCallback(async () => {
+  const dangerouslyDelete = useDeepCompareCallback(async () => {
     if (writeable) {
       const _deleted = await deleteFile({
         authentication, repository, file, branch,

src/components/organization/useOrganization.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Organization, CurrentUserOrganizations } from '../..';
 import { getCurrentUserOrgs } from '../../core';
+import { useDeepCompareCallback } from 'use-deep-compare';
 
 function useOrganization({
   organization,
@@ -14,7 +15,7 @@ function useOrganization({
     onOrganization(_organization);
   }, [onOrganization]);
 
-  const list = useCallback(async () => {
+  const list = useDeepCompareCallback(async () => {
     const _organizations = await getCurrentUserOrgs({ config });
     return _organizations;
   }, [config]);

src/components/repository/useRepository.js

@@ -18,6 +18,7 @@ import {
   removeRepositoryZip,
   getFileFromRepositoryZip,
 } from './helpers';
+import { useDeepCompareCallback, useDeepCompareEffect } from 'use-deep-compare';
 
 function useRepository({
   repositories,
@@ -63,26 +64,26 @@ function useRepository({
     setBranch(_branch);
   }, []);
 
-  const create = useCallback(async (settings) => {
+  const create = useDeepCompareCallback(async (settings) => {
     const _repository = await createRepository({ settings, config });
     update(_repository);
   }, [config, update]);
 
-  const dangerouslyDelete = useCallback(() => {
+  const dangerouslyDelete = useDeepCompareCallback(() => {
     if (user && user.username === repository.owner.username) {
       deleteRepository({ repository, config });
       window.setTimeout(update, 500);
     };
   }, [user, repository, config, update]);
 
-  const fork = useCallback(async () => {
+  const fork = useDeepCompareCallback(async () => {
     if ((user && user.username) !== repository.owner.username) {
       const _repo = await forkRepository({ repository, config });
       update(_repo);
     };
   }, [config, repository, update, user]);
 
-  const save = useCallback(async (settings) => {
+  const save = useDeepCompareCallback(async (settings) => {
     let _repository;
 
     if (repository.permissions.admin) {
@@ -93,36 +94,36 @@ function useRepository({
     };
   }, [config, repository, update]);
 
-  const storeZip = useCallback(async () => {
+  const storeZip = useDeepCompareCallback(async () => {
     await storeRepositoryZip({ repository, config });
   }, [repository, config]);
 
-  const removeZip = useCallback(async () =>{
+  const removeZip = useDeepCompareCallback(async () =>{
     await removeRepositoryZip({ repository, config });
   }, [repository, config]);
 
-  const fileFromZip = useCallback(async (filepath) => {
+  const fileFromZip = useDeepCompareCallback(async (filepath) => {
     const file = await getFileFromRepositoryZip({
       repository, filepath, config,
     });
     return file;
   }, [repository, config]);
 
-  const forks = useCallback(() => {
+  const forks = useDeepCompareCallback(() => {
     repositoryForks({ repository, config });
   }, [repository, config]);
 
   const close = useCallback(() => {
     update();
   }, [update]);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (__branch !== branch) {
       setBranch(__branch);
     }
   }, [__branch, branch]);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (repository && branch !== repository.branch) {
       update({ ...repository, branch });
     }

src/components/tree-blob/useBlob.js

@@ -5,6 +5,7 @@ import deepFreeze from 'deep-freeze';
 import {manifestFileComparer} from '../file/helpers';
 
 import { Tree } from '.';
+import { useDeepCompareCallback, useDeepCompareMemo } from 'use-deep-compare';
 
 function useBlob({
   config,
@@ -35,11 +36,11 @@ function useBlob({
     update();
   }, [update]);
 
-  const tsvManifestFileComparer = useCallback((item1,item2) => {
+  const tsvManifestFileComparer = useDeepCompareCallback((item1,item2) => {
     return manifestFileComparer({repository, item1, item2});
   }, [repository, repository?.books, manifestFileComparer]);
 
-  const browse = useMemo(() => {
+  const browse = useDeepCompareMemo(() => {
     return (tree || url) ? (
       <Tree
         tree={tree}

yarn.lock

@@ -5919,6 +5919,11 @@ deps-sort@^2.0.0:
     subarg "^1.0.0"
     through2 "^2.0.0"
 
+dequal@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-1.0.0.tgz#41c6065e70de738541c82cdbedea5292277a017e"
+  integrity sha512-/Nd1EQbQbI9UbSHrMiKZjFLrXSnU328iQdZKPQf78XQI6C+gutkFUeoHpG5J08Ioa6HeRbRNFpSIclh1xyG0mw==
+
 dequal@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
@@ -17206,6 +17211,13 @@ use-deep-compare-effect@^1.3.1:
     "@types/react" "^17.0.0"
     dequal "^2.0.2"
 
+use-deep-compare@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/use-deep-compare/-/use-deep-compare-1.1.0.tgz#85580dde751f68400bf6ef7e043c7f986595cef8"
+  integrity sha512-6yY3zmKNCJ1jjIivfZMZMReZjr8e6iC6Uqtp701jvWJ6ejC/usXD+JjmslZDPJQgX8P4B1Oi5XSLHkOLeYSJsA==
+  dependencies:
+    dequal "1.0.0"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"