Static value as hook input

Question

I have a fetching service that fetches new data asynchronously and I want to update a component when new data is fetched.

To simplify things, assume this is my setup:

class SomeService {
  static data;

  // can be called by other components (asynchronous)
  static fetchData = async () => {
    data = await someAsynchronousCall() // data gets a new value
  };
}

const HomeScreen = () => {
  useEffect(() => {
    console.log('new data is: ' + SomeService.data);
  }, [SomeService.data]); // I want to trigger this once data changes

  return <View> ... </View>
};

I've tried something like this, but when data changes, the useEffect doesn't get called.

Is there a way to get the desired behaviour?

Answer 1

useEffect listen to state update. SomeService.data is a static variable. You should implement something like that using Hooks.

const HomeScreen = () => {
  const [data, setData] = useState();
  //Stand for componentDidMount (empty array dependancies)
  useEffect(()=>{
    setData(new SomeService());
  },[])
  useEffect(() => {
    console.log('new data is: ' + data);
  }, [data]); // I want to trigger this once data changes

  return <View> ... </View>
};

Answer 2

useEffect run after every render by default (if there is no second parameter). And the second parameter of useEffect is for checking if it should re-run or not, NOT trigger the useEffect to run.

In your case, your static data may change, but there is nothing that makes your component re-render, so your useEffect function won't run.

You can make your data as state to make it re-render. Or somehow trigger re-render whenever your static data changes.

Answer 3

You can use context api to separate your fetching logic from your component.

import React from 'react'
const DataContext = React.createContext()

function DataProvider({children}) {
  const [data, setData] = React.useState()
  React.useEffect(() => {
    const fetchData = async () => {
      const data = await someAsynchronousCall()
      setData(data)
    };
    fetchData()
  }, [])
  return (
    <DataContext.Provider value={data}>
        {children}
    </CountStateContext.Provider>
  )
}
export {DataProvider, DataContext}

In your component use useContext to get data

const HomeScreen = () => {
  const data = useContext(DataContext)
  useEffect(() => {
    console.log('new data is: ' + SomeService.data);
  }, [data]); // I want to trigger this once data changes

  return <View> ... </View>
};

and wrap your app in DataProvider

const App = props => {
<DataProvider>
  <HomeScreen />
  {/* other component */}
</DataProvider>
}