title: React - component doesn't re-render after delete request
body: <p>I have problem that after deleting element from my list, component doesn't want to re-render. When I go through routing to some subpage and then back, item is already removed, same if I sort list, then it also disappears. The thing is that I don't want to force user to refresh the website or sort to see the effect. It used to work if I pass to </p>
  
  <blockquote>
    <p>deviceList props as a "props.data" instead of "devices"</p>
  </blockquote>
  
  <p>(will bold the place in the code). Does anyone has idea how to fix it? I'm still kinda new to react hooks and perhaps I just gotta adjust useEffect a bit better,
  props.selectedDevices is taken from redux and just gets the ID of deleted item, my code:</p>
  
  <p>Parent:</p>
  
  <pre><code>function App(props) {
    const [data, setData] = useState("")
    const [filter, setFilter] = useState([])
  
  
    useEffect(() =&gt; getDeviceDataTotal(), [])
  
    const getDeviceDataTotal = () =&gt; {
      console.log('refresh clicked')
      fetch("http://localhost:4000/device")
        .then(res =&gt; res.json())
        .then(res =&gt; setData(res))
        .catch(err =&gt; {
          throw err;
        });
    };
  
    const deleteDevices = (e) =&gt; {
      console.log('delete clicked')
      props.selectedDevices.map(el =&gt; {
        return fetch(`http://localhost:4000/device/delete/${el}`, {
          method: "DELETE"
        })
          .then(res =&gt; res.json())
          .then(() =&gt; getDeviceDataTotal())
          .catch(err =&gt; {
            throw err;
          });
      });
    }
  
    const filterList = e =&gt; {
      let filteredList;
      filteredList = data.filter(el =&gt; {
        return el.device_id.includes(searched);
      });
      setFilter(filteredList)
    };
  
  
    return (
      &lt;BrowserRouter&gt;
        &lt;MuiThemeProvider theme={createMuiTheme(theme("#96BF1B", "#ffffff"))}&gt;
  
          &lt;Switch&gt;
            &lt;Route
              exact
              path="/"
              render={() =&gt; &lt;Dashboard classes={classes} dataDevice={data} refresh={getDeviceDataTotal} filtered={filter} filterList={filterList} deleteDevices={deleteDevices}/&gt; }
            /&gt;
            ......
          &lt;/Switch&gt;
        &lt;/MuiThemeProvider&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  </code></pre>
  
  <p>Child Component:</p>
  
  <pre><code>function Dashboard(props) {
    const [selectedSort, setSelectedSort] = useState("1")
    const [devices, setDevices] = useState(props.dataDevice)
  
  
    useEffect(() =&gt; {
      let isSubscribed = true
      const fetchData = async() =&gt; {
        try {
          const res = await fetch("http://localhost:4000/device")
          const response = await res.json()
          if (isSubscribed) {
            setDevices(response)
           }
        } catch (err) {
          console.log(err)
        }
      }
  
      fetchData()
      return () =&gt; isSubscribed = false
    },[])
  
    useEffect(() =&gt; props.refresh() ,[devices])
  
  
    useEffect(() =&gt; sortDeviceData(), [selectedSort])
  
    const sortDeviceData = () =&gt; {
      switch(selectedSort) {
        case "device":
          (filtered.length ? filtered : dataDevice).sort(function(a,b) {
            return (a.device_id.toUpperCase() &lt; b.device_id.toUpperCase()) ? -1 : (a.device_id.toUpperCase() &gt; b.device_id.toUpperCase()) ? 1 : 0
          })
          setDevices(dataDevice)
          break;
        case "customer":
          (filtered.length ? filtered : dataDevice).sort(function(a,b) {
            return (a.customer.toUpperCase() &lt; b.customer.toUpperCase()) ? -1 : (a.customer.toUpperCase() &gt; b.customer.toUpperCase()) ? 1 : 0
          })
          setDevices(dataDevice)
          break;
        case "server":
          (filtered.length ? filtered : dataDevice).sort(function(a,b) {
            return (a.server.toUpperCase() &lt; b.server.toUpperCase()) ? -1 : (a.server.toUpperCase() &gt; b.server.toUpperCase()) ? 1 : 0
          })
          setDevices(dataDevice)
          break;
        case "creation":
          (filtered.length ? filtered : dataDevice).sort(function(a,b) {
            return (a.createdAt.toUpperCase() &lt; b.createdAt.toUpperCase()) ? -1 : (a.createdAt.toUpperCase() &gt; b.createdAt.toUpperCase()) ? 1 : 0
          })
          setDevices(dataDevice)
          break;
        case "update":
          (filtered.length ? filtered : dataDevice).sort(function(a,b) {
            return (a.updatedAt.toUpperCase() &lt; b.updatedAt.toUpperCase()) ? -1 : (a.updatedAt.toUpperCase() &gt; b.updatedAt.toUpperCase()) ? 1 : 0
          })
          setDevices(dataDevice)
          break;    
        default: 
          return setDevices(dataDevice)
      }
    }
  
  
    const { classes, logged, dataDevice, filtered } = props;
    return logged ? (
      &lt;main style={{ display: "flex" }} key={dataDevice}&gt;
        &lt;section className={classes.sectionLeftContainer}&gt;
  
          &lt;div className={classNames(classes.search, classes.tableBackground)}&gt;
            &lt;InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput
              }}
              inputProps={{ "aria-label": "Search" }}
              onChange={e =&gt; props.getSearched(e.target.value)}
            /&gt;
            &lt;Button
              variant="outlined"
              className={classes.searchBtn}
              onClick={e =&gt; props.filterList(e)}
            &gt;
              Search
            &lt;/Button&gt;
            &lt;Button
              variant="outlined"
              className={classes.btnAddDevice}
              onClick={e =&gt; {
                if (window.confirm("Are you sure you want to delete this device")) {
                  props.deleteDevices(e);
                }
              }}
            &gt;
              &lt;DeleteIcon /&gt;
              Delete devices
            &lt;/Button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;FormControl className={classes.selectContainer}&gt;
  
              &lt;Select 
                value={selectedSort} 
                style={{position: 'absolute', right: 0, bottom: 10, width: 150}}
                onChange={e =&gt; setSelectedSort(e.target.value)}
                &gt;
                &lt;MenuItem value="1"&gt;Default&lt;/MenuItem&gt;
                &lt;MenuItem value="device"&gt;Device&lt;/MenuItem&gt;
                &lt;MenuItem value="customer"&gt;User&lt;/MenuItem&gt;
                &lt;MenuItem value="server"&gt;Server&lt;/MenuItem&gt;
                &lt;MenuItem value="creation"&gt;Creation date&lt;/MenuItem&gt;
                &lt;MenuItem value="update"&gt;Update date&lt;/MenuItem&gt;
              &lt;/Select&gt;
            &lt;/FormControl&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;DeviceList
              classes={classes}
              **deviceData={devices} if props.data - works well but sorting doesn't work**
              filtered={filtered}
            /&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/main&gt;
  }
  </code></pre>