在React无状态组件中使用Hooks存储不可观察数据的最佳方法

Question

I'm using mobx-react / mobx-react-lite for state management

Using classes i can define a non observable idToDelete to store the clicked item id, open a Modal using an observable and when the user clicks "Delete", i know the item to delete. The id is "remembered" by the component trough the re-renders

    class Greeting extends React.Component {
      idToDelete = null;

      confirmDelete = id => {
        this.idToDelete = id;
        openConfirm = true;
      }

      closeModal = () => {
        openConfirm = true;
        this.idToDelete = null;
      }

      @observable
      openConfirm = false;
      render() {
        // List of items with delete button
        <button onClick=this.confirmDelete(id)>Delete</button>

        // Confirm Delete Modal

      }
    }

But in a stateless component the id will become null (the initialization value) on each re-render.

Using useLocalStore hook i can store observable values:

All properties of the returned object will be made observable automatically

But i dont want to re-render just because i am storing/changing the id.

Using React.React.createContext / useContext seems like a bit overkill to me (it's kind of private value and it is not relevant outside the component itself)

Is there a "local storage" way to achieve this? (without observable convertion)

What are best practices for this situation?

Answer 1

You can use the useRef hook to save the value. A change to this value will not trigger a re-render and the value will remain the same across renders unless you override it.

Its also explained in detail here

Yes! The useRef() Hook isn't just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.

eg:

import { useRef } from 'react';

const idToDelete = useRef("");

confirmDelete = id => {
    idToDelete.current = id;
}

closeModal = () => {
    idToDelete.current = null;
}

Also mind the catch, you need to use .current to access the data.