node.jsreact-nativecleardb

Update React Native page when there is a change in ClearDB database

I am working on this QR code based application which is using a ClearDB MySQL database that is stored on Heroku servers. The frontend communicates with the database by using a REST API built with Node.js and Express

Whenever a user scans a QR code, the value of the code changes in the database. But I don't know how to reflect that change instantly in the frontend. Basically what I need help with is finding a way to automatically refresh the page whenever that value changes in the database and display the new QR code based on the new value. Such that when a user scans the code, it instantly updates on his page, not only in the database.

I looked into sockets but didn't quite understand how to integrate it into my application, especially when it comes to the frontend.

Solution

  • You can use a state value for detecting the change. You declare a state value of which type is boolean(any type you want). Then you can implement setState function(in case of class component) or useState hook(in case of functional component) in the module of updating data in the database. For example:

    const [isChanged, setChanged] = useState(false);
const updateQRData = (data) => {
... Update codes
setChanged(isChanged => !isChanged);
}

    Then you can use useEffect hook:

    useEffect(() => {
... Write some codes
}, [isChanged]);