diff --git a/src/device/DeviceTags.tsx b/src/device/DeviceTags.tsx
index 7806a59..ab1d8a5 100644
--- a/src/device/DeviceTags.tsx
+++ b/src/device/DeviceTags.tsx
@@ -8,7 +8,6 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
-  Theme,
   Typography
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
@@ -19,10 +18,10 @@ import TagSettings from "common/TagSettings";
 import { Device, Tag } from "models";
 import { filterByTag } from "pbHelpers/Tag";
 import { useDeviceAPI, useSnackbar, useTagAPI } from "providers";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { pond } from "protobuf-ts/pond";
 
-const useStyles = makeStyles((_theme: Theme) => {
+const useStyles = makeStyles(() => {
   return ({
     addIcon: {
       color: "var(--status-ok)"
@@ -45,19 +44,19 @@ function AddDeviceTag(props: AddDeviceTagProps) {
   const [searchValue, setSearchValue] = useState("");
   const [tags, setTags] = useState<Tag[]>([])
 
-  const loadTags = () => {
+  const loadTags = useCallback(() => {
     tagAPI.listTags().then(resp => {
-      let newTags: Tag[] = [];
+      const newTags: Tag[] = [];
       resp.data.tags.forEach((tag: pond.Tag) => {
         newTags.push(Tag.create(tag))
       })
       setTags(newTags)
     })
-  }
+  }, [tagAPI])
 
   useEffect(() => {
     loadTags()
-  }, [])
+  }, [loadTags])
 
   const tagItems = tags
     .filter(tag => !deviceTags.some(tagSettings => tagSettings.key === tag.settings.key))
@@ -144,10 +143,10 @@ export default function DeviceTags(props: DeviceTagsProps) {
   const [deviceTags, setDeviceTags] = useState<pond.TagSettings[]>(device.status.tags);
   const previousDeviceRef = useRef(device);
 
-  const loadTags = () => {
+  const loadTags = useCallback(() => {
     // setLoading(true)
     tagAPI.listTags().then(resp => {
-      let newTags: Tag[] = [];
+      const newTags: Tag[] = [];
       resp.data.tags.forEach((tag: pond.Tag) => {
         newTags.push(Tag.create(tag))
       })
@@ -155,7 +154,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
     }).finally(() => {
       // setLoading(false)
     })
-  }
+  }, [tagAPI])
 
   useEffect(() => {
     if (previousDeviceRef.current !== device) {
@@ -166,14 +165,16 @@ export default function DeviceTags(props: DeviceTagsProps) {
 
   useEffect(() => {
     loadTags()
-  }, [])
+  }, [loadTags])
 
   const addTag = (tag: Tag) => {
     if (!deviceTags.some(dt => dt.key === tag.settings.key)) {
       deviceAPI
         .tag(device.id(), tag.settings.key)
         .then(() => {
-          setDeviceTags([...deviceTags, tag.settings]);
+          setDeviceTags(current =>
+            current.some(dt => dt.key === tag.settings.key) ? current : [...current, tag.settings]
+          );
         })
         .catch(() => error("Failed to tag device as " + tag.name));
     }
@@ -184,7 +185,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
       deviceAPI
         .untag(device.id(), tag.key())
         .then(() => {
-          setDeviceTags(deviceTags.filter(t => tag.key() !== t.key));
+          setDeviceTags(current => current.filter(t => tag.key() !== t.key));
         })
         .catch(() => error("Failed to remove tag " + tag.name + " from device"));
     }
@@ -197,7 +198,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
   return (
     <React.Fragment>
       {deviceTags?.map(tagSettings => {
-        let pondTag = pond.Tag.create({ settings: tagSettings })
+        const pondTag = pond.Tag.create({ settings: tagSettings })
         return (
           <Grid key={"device-tags-"+tagSettings.key}>
             <DeviceTag tag={Tag.create(pondTag)} removeTagFromDevice={removeTagFromDevice} />