React Hook does not update on state update

Hey there, I have been using zustand.js so far but there is a case where the html does not update when the state changes. My Code:

NotesList.js:

import React, { Component, useState } from 'react';

import {useNotes} from '../store.js';

const NotesList = () => {
    let notes = useNotes(state => state.data.notes);
    let changeCurrentNote = useNotes(state => state.changeCurrentNote);


  //  let uuidNote = useNotes(state => state.data.notes.uuid.title);
    const selectNote = (e) => {
        let note_id = e.target.id.split('-')[1];
        changeCurrentNote(note_id);
    }

    return(
    <div className="notes">
       {
       Object.entries(notes).map((note, key) => { // note[0] = id, note[1].content, note[1].title etc
           return (<div id={'note-' + note[0]} key={note[0]} onClick={selectNote}>{note[1].title}</div>)
       })
    }

    </div>
    )
}
export default NotesList

A part of store.js:

const [useNotes] = create((set, get) => ({
    data: {
        notes: {
            uuid: {
                content: "Just a Note.",
                title: "A Note here...",
                tags: ["Abc"]
            },
        }
  }
}
export {useNotes}

However, if I add let uuidNote = useNotes(state => state.data.notes.uuid.title); in the Hook the specific title does update (other titles don’t), is there a way to fix that / am I doing someting wrong?

Edit: it works if I use the following save() function (inside create() )`

save: () => {
   
            let oldState = get().data.notes;
 
            
            let currentNote = get().data.currentNote;

            oldState[currentNote.id].title = currentNote.title;
            oldState[currentNote.id].content = currentNote.content;
            oldState[currentNote.id].tags = currentNote.tags;

            set(state => {
                state.data.notes = null // it does not work if I remove this line
            });
            set(state => {
                state.data.notes = oldState
            })
}

[dai-shi]

Glad it worked well.

        set(state => {
            state.data = newState
       });

This is not correct. Please do it like below:

        set({ data: newState })
        set(state => ({ data: newState })) // this works too
        set(state => ({ ...state, data: newState })) // this works too

Otherwise, useStore() with no selector won’t work.

maybe just the immerjs example provided in the docs

Do you mean like this?

import produce from 'immer'

const useStore = create(set => ({
  lush: { forrest: { contains: { a: "bear" } } },
  setWithImmer: fn => set(produce(fn)),
}))

const setWithImmer = useStore(state => state.setWithImmer)
setWithImmer(state => {
  state.lush.forrest.contains = null
})

It looks a bit verbose.

import produce from 'immer'

const useStore = create(origSet => ({
  lush: { forrest: { contains: { a: "bear" } } },
  set: fn => origSet(produce(fn)),
}))

const set = useStore(state => state.set)
set(state => {
  state.lush.forrest.contains = null
})

A little better, but still. I personally don’t think it’s worth it either way…

[dai-shi]

Thanks.

    changeCurrentNote: (id) => {
        set(state => ({
            data: {
              ...state.data,
              currentNode: {
                id,
                title: state.data.notes[id].title,
                content: state.data.notes[id].content,
                tags: state.data.notes[id].tags,
              }
           }
        }));

this should fix.

If you prefer mutating syntax, consider using immer.