# Using uppy .on callbacks in a functional component

**URL:** <https://community.transloadit.com/t/using-uppy-on-callbacks-in-a-functional-component/15372>\
**Category:** Uppy\
**Created:** [July 27, 2020, 9:19pm UTC](https://community.transloadit.com/t/using-uppy-on-callbacks-in-a-functional-component/15372 "2020-07-27T21:19:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![anark](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/anark/32/257_2.png) [@anark](https://community.transloadit.com/u/anark)\
**Post date:** [July 27, 2020, 9:19pm UTC](https://community.transloadit.com/t/using-uppy-on-callbacks-in-a-functional-component/15372/1 "2020-07-27T21:19:12Z")

</div>

When using uppy .on callbacks in an functional component the previous state seems to be overwritten.

See example at [https://codesandbox.io/s/optimistic-mclaren-zbyvh?file=/src/App.js](https://codesandbox.io/s/optimistic-mclaren-zbyvh?file=/src/App.js)

The example displays a simple ui with a drag and drop uploader. When you select a file it should be added to the existing file in the files list, however the newly selected file seems to always wipe out and replace the list.

Is there a way to use the .on callbacks with uppy in a way that does not overwrite the current state?

---

<div class="post-metadata">

**Author:** ![ajkachnic](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/ajkachnic/32/260_2.png) [@ajkachnic](https://community.transloadit.com/u/ajkachnic)\
**Post date:** [July 28, 2020, 3:35pm UTC](https://community.transloadit.com/t/using-uppy-on-callbacks-in-a-functional-component/15372/2 "2020-07-28T15:35:08Z")

</div>

Hello! This is a common issue with state not syncing. The problem lies within the `addFile` method. Here’s a simple fix

```auto
  const addFile = useCallback(
    file => {
      setFiles(files => [...files, file.name]);
    },
    [setFiles]
  );

```

The actual error is because the `files` dependency is stale when the callback is called. The setter method for state can either take a function (as shown here), or it can just take data (as you were doing) as an argument. When we pass it a function, we can take the current value as an a parameter. This means that our state will never be stale.

I hope this helped. Let me know if you have anymore questions  
- Andrew