React hooks - useEffect updating state but the updated state is not re-rendered

Question

Background of the problem

I have a problem with my React Hook.

Basically, I want to re-render my <li> components (named elementsToDisplay in the code below) when the user changes the order to display them or when the user enters a search string in a text input element to filter them.

//...import statements here...

function myHook(props) {
    const [searchString, setSearchString] = useState('') // Initially empty searchstirng
    const [order, setOrder] = useState('order1') // Ordering is initially order1
    const [myObjects, setObjects] = useState(props.myObjects) // The objects needed to create the elements to display
    const [elementsToDisplay, setElementsToDisplay] = useState([]) // The <li> elements to display (based on myObjects)
    
     /* 
        IF THE SEARCHSTING OR THE ORDER GET CHANGED BY THE USER, CHANGE MY OBJECTS
    */
   useEffect(() => {
       var myObjectsCopy = [... props.myObjects]
       myObjectsCopy.sort((a,b) => {
           // Ordina in base a cosa l' utente ha selezionato dal sortByButton.
           if (order == 'order1'){
               // return some ordering
            }
            else if (order == 'order2'){
                // return some ordering
            }
            else if (order == 'order3'){
                // return some ordering
            }
            else{
                // return some ordering
            }
        })
        var newObjects = myObjectsCopy.filter(item => {
             // filter based on searchsting
             return item.productCode.toLowerCase().indexOf(searchString.toLowerCase()) >= 0
         })
       setObjects(newObjects)
       console.log(myObjects[0]) // NOTE here myObjects get updated as expected everytime
   }, [order, searchString])


   /*
      When myObjects change, so the <li> elements to display should (end they do!).
   */
    useEffect(()=>{
        var elements = get_elements_to_display()
        setElementsToDisplay(elements)
        console.log(elementsToDisplay[0]) // NOTE, elementsToDisplay change as expected!!!!!!
    },[myObjects])



    /*
       Function that creates the <li> elements to display based on myObjects. NOTE works fine
    */
     function get_elements_to_display(){
        return myObjects.map((item, index) => {
            var competitors = item.competitors
            return(
                <li key={index}>
                    <span className='produt-separator'/>
                    <ProductTable item={item} index={index} />
                </li>
            )
        })
    }

    

    /*
       Change the ordering to display the elements. NOTE Work as expected!!!
    */
    function handleChangeOrder(e, value) {
        e.preventDefault();
        console.log(value) // NOTE the right ordering gets passed
        setOrder(value)
        console.log(order) // NOTE order gets updated as expected
    }


   
    /*
       Render the component
    */
     return (
            <div>
                <h1 className='page-title'>My Title</h1>
                <input className="search-input" type='text' 
                    onChange={e => setSearchString(e.target.value)} 
                    placeholder='Cerca il toner o cartuccia per nome...'></input>
                <span width="8px"/>
                <SortByButton handleClick={handleChangeOrder}/>
                <AddProductPopUp/>
                <ul>
                    {elementsToDisplay}
                </ul>
            </div>
        )

}

Problem

The problem is that all my state variables get changed as expected, but the rendered <li> components stay the same. This is weird as they are stored in the state elementsToDisplay and I can see that it gets updated whenever I select a new ordering or try to filter my elements inputting a search string.

Can you see if I am doing something wrong from the sample code I posted?

Answer 1

(From the comments)

Changing the key of the list <li key={index}> to some unique identifier other than index will fix it.

React uses keys to detect what items in a list have changed. Since you're using index as a key in non-static instances, and later sort the array out from which you're rendering, the order of the indices remain the same.