From 08396ec516db04f6bfed5214b8702ae92c959a4c Mon Sep 17 00:00:00 2001
From: Brad Adams <hi@breadadams.com>
Date: Thu, 12 Sep 2019 13:50:57 +0200
Subject: [PATCH] fix: main loading flag and mini optimizations (#159)

+ Ensure that `loadingState` is set to true when `fetchData` is called
+ Add `useMemo` and `useCallback` hooks
---
 packages/react/src/index.js       | 24 +++++++++++++-----------
 packages/react/src/utils/index.js |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index a27f71f78..fda23de3f 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
 
 import { CardWrap, CardMedia, CardContent, CardEmpty } from './components/Card'
@@ -44,29 +44,31 @@ function Microlink (props) {
     lazy,
     ...restProps
   } = props
-  const isLoadingUndefined = loadingProp === undefined
+  const isLoadingUndefined = useMemo(() => loadingProp === undefined, [loadingProp])
   const [loadingState, setLoading] = useState(
     isLoadingUndefined ? true : loadingProp
   )
   const [cardData, setCardData] = useState({})
-  const apiUrl = createApiUrl(props)
+  const apiUrl = useMemo(() => createApiUrl(props), [props])
 
-  const isLazyEnabled = isLazySupported && (lazy === true || isObject(lazy))
-  const lazyOptions = isObject(lazy) ? lazy : undefined
+  const isLazyEnabled = useMemo(() => isLazySupported && (lazy === true || isObject(lazy)), [lazy])
+  const lazyOptions = useMemo(() => isObject(lazy) ? lazy : undefined, [lazy])
   const [hasIntersected, cardRef] = useIntersectionObserver(isLazyEnabled, lazyOptions)
 
-  const canFetchData = !isLazyEnabled || (isLazyEnabled && hasIntersected)
+  const canFetchData = useMemo(() => !isLazyEnabled || (isLazyEnabled && hasIntersected), [isLazyEnabled, hasIntersected])
 
-  const fetchData = () => {
+  const fetchData = useCallback(() => {
     if (canFetchData) {
+      setLoading(true)
       const fetch = isFunction(setData)
         ? Promise.resolve({})
-        : fetchFromApiUrl(apiUrl, props)
+        : fetchFromApiUrl(apiUrl, props.apiKey)
+
       fetch.then(({ data }) => mergeData(data))
     }
-  }
+  }, [apiUrl, canFetchData, setData, props.apiKey])
 
-  const mergeData = fetchData => {
+  const mergeData = useCallback(fetchData => {
     const payload = isFunction(setData)
       ? setData(fetchData)
       : { ...fetchData, ...setData }
@@ -102,7 +104,7 @@ function Microlink (props) {
     })
 
     setLoading(false)
-  }
+  }, [setData])
 
   useEffect(fetchData, [props.url, setData, hasIntersected])
 
diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js
index 8333e3cd0..110a2be58 100644
--- a/packages/react/src/utils/index.js
+++ b/packages/react/src/utils/index.js
@@ -69,7 +69,7 @@ export const createApiUrl = props => {
   return url
 }
 
-export const fetchFromApiUrl = (apiUrl, { apiKey }) => {
+export const fetchFromApiUrl = (apiUrl, apiKey) => {
   const headers = apiKey ? { 'x-api-key': apiKey } : {}
   return fetch(apiUrl, { headers }).then(res => res.json())
 }