Filing a bug for React

metamn · Aug 27, 2019 · 1dbed07 · 1dbed07
1 parent 3c2ffa4
commit 1dbed07
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 16 deletions.
diff --git a/src/components/LoadingDataApiAxios/LoadingDataApiAxios.js b/src/components/LoadingDataApiAxios/LoadingDataApiAxios.js
@@ -42,7 +42,6 @@ const Article = styled(_Article)(props => ({
  * Generates a text placeholder for articles
  */
 const ArticlesPlaceholder = props => {
-  console.log("ArticlesPlaceholder");
   /**
    * Loads the placeholder
    */
@@ -81,7 +80,7 @@ const Articles = props => {
   ]);
 
   /**
-   * Loads the data
+   * Loads data
    */
   const { data } = useDataAPI(
     articlesPlaceholder,

diff --git a/src/components/LoadingDataApiAxiosPlaceholderSVG/LoadingDataApiAxiosPlaceholderSVG.js b/src/components/LoadingDataApiAxiosPlaceholderSVG/LoadingDataApiAxiosPlaceholderSVG.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Code } from "react-content-loader";

diff --git a/src/components/LoadingDataGraphQLApollo/LoadingDataGraphQLApollo.js b/src/components/LoadingDataGraphQLApollo/LoadingDataGraphQLApollo.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
@@ -79,10 +79,28 @@ const SettingsPlaceholder = props => {
  * Loads site settings from the database
  */
 const Settings = props => {
+  /**
+   * Loads props
+   */
   const { placeholder, displayData } = props;
-  const defaultProps = SettingsPlaceholder(placeholder);
 
+  /**
+   * Creates the placeholder
+   */
+  const defaultProps = useMemo(() => SettingsPlaceholder(placeholder), [
+    placeholder
+  ]);
+
+  /**
+   * Loads data
+   */
   const { data } = useData(defaultProps, query, "generalSettings");
+
+  /**
+   * Returns data
+   *
+   * If `displayData` then returns default data (for demo purposes)
+   */
   const { title, url, description } = displayData ? data : defaultProps;
 
   return (

diff --git a/src/components/PlaceholderText/PlaceholderText.js b/src/components/PlaceholderText/PlaceholderText.js
@@ -1,3 +1,4 @@
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import uuid from "uuid";
 
@@ -32,6 +33,7 @@ const defaultProps = {
  * Displays the component
  */
 const PlaceholderText = props => {
+  console.log("PlaceholderText");
   /**
    * Loads props
    */
@@ -40,22 +42,29 @@ const PlaceholderText = props => {
   /**
    * Generates a text row
    */
-  const textRow = [...Array(rowLength)].map(i => content).join("");
+  const textRow = useMemo(
+    () => [...Array(rowLength)].map(i => content).join(""),
+    [content, rowLength]
+  );
 
   /**
    * Generates the text rows
    */
-  const textRows = [...Array(numberOfRows)].map(i => {
-    /**
-     * Generates a random uuid
-     */
-    const id = uuid.v4();
+  const textRows = useMemo(
+    () =>
+      [...Array(numberOfRows)].map(i => {
+        /**
+         * Generates a random uuid
+         */
+        const id = uuid.v4();
 
-    return {
-      id: id,
-      text: textRow
-    };
-  });
+        return {
+          id: id,
+          text: textRow
+        };
+      }),
+    [numberOfRows, textRow]
+  );
 
   return textRows;
 };