Merge pull request #1974 from Codeinwp/fix/issue-1973

fix: otter making repeated api calls

docs/coding-best-practices.md

@@ -101,4 +101,6 @@ In this project, we do not have cases when the code must do a lot of things at a
 
 The challenge in this project is to extend the code to support more features. The more we have, the harder it will be to maintain the code. Fancy tricks without a good reason are not good.
 
-A piece code that is performant, easy to read and understand, and easy to maintain is the best. [But sometime you can not have it all](https://www.youtube.com/watch?v=hFDcoX7s6rE). So, you need to choose what is more important for your case.
+A piece code that is performant, easy to read and understand, and easy to maintain is the best. [But sometime you can not have it all](https://www.youtube.com/watch?v=hFDcoX7s6rE). So, you need to choose what is more important for your case.
+
+If you are using filters or HOC to add, for example, a Toolbar to all Blocks, it's recommended that you make useSelect or other requests inside child components to avoid them being triggered when they're not needed. An example of what type of issues it can cause: https://github.com/Codeinwp/otter-blocks/pull/1974

src/blocks/helpers/use-settings.js

@@ -5,15 +5,15 @@ import api from '@wordpress/api';
 
 import { __ } from '@wordpress/i18n';
 
-import { dispatch } from '@wordpress/data';
-
 import {
-	useEffect,
-	useState
-} from '@wordpress/element';
+	dispatch,
+	useSelect
+} from '@wordpress/data';
+
+import { useState } from '@wordpress/element';
 
 /**
- * useSettings Hook.
+ * useSettings Hook, modifed for Otter usage.
  *
  * useSettings hook to get/update WordPress' settings database.
  *
@@ -32,25 +32,23 @@ import {
 const useSettings = () => {
 	const { createNotice } = dispatch( 'core/notices' );
 
-	const [ settings, setSettings ] = useState({});
 	const [ status, setStatus ] = useState( 'loading' );
+	const [ settings, setSettings ] = useState({});
 
-	const getSettings = () => {
-		api.loadPromise.then( async() => {
-			try {
-				const settings = new api.models.Settings();
-				const response = await settings.fetch();
-				setSettings( response );
-			} catch ( error ) {
-				setStatus( 'error' );
-			} finally {
-				setStatus( 'loaded' );
-			}
-		});
-	};
+	useSelect( select => {
+		const { getEntityRecord } = select( 'core' );
+
+		// Bail out if settings are already loaded.
+		if ( Object.keys( settings ).length ) {
+			return;
+		}
+
+		const request = getEntityRecord( 'root', 'site' );
 
-	useEffect( () => {
-		getSettings();
+		if ( request ) {
+			setStatus( 'loaded' );
+			setSettings( request );
+		}
 	}, []);
 
 	/**
@@ -107,7 +105,7 @@ const useSettings = () => {
 				);
 			}
 
-			getSettings();
+			setSettings( response );
 			onSuccess?.( response );
 		});