Possible wrong usages of useRef leads inconsistent behavior of the program about react-channel-plugin

[ukjinjang]

Thank you for comment.

I intentionally decided to use this pattern, because I did not intend for these properties to be "reactive values" and not want them directly involved in the render process.

If you were to remove useRef, the someProp would need to be included in the dependency array to ensure that it always has the current value. Otherwise, the hook would close over the value of someProp at the time of the initial render, and it would not update when someProp changes.

But the example you gave could really be a problem, and we might fix it by combining the two hooks you just talked about like:

useDeepEffect(() => {
  // update `optionRef` first
  optionRef.current = channelIOBootOption;

  // then reboot, if needed
  if (isBooted && rebootOnOptionChanged) {
    debugLogger(verbose, 'Rebooting since option has been changed...');
    void boot().catch(() => void 0);
  }
}, [channelIOBootOption]);

If there are alternative opinion, feel free to share it.

[a3626a]

For the first, the code you suggested would solve the problem, Thank you.

---

And More... (I'm not a React expert. Something I wrote here possibly wrong.)

When I first read your useRef pattern, I think you intended an optimization to reduce number of re-renders, but the optimization actually does not work. (or has no meaning) I think there're no benefits of this pattern.

I did not intend for these properties to be "reactive values"

I don't get exact point of this...

not want them directly involved in the render process.

And because channelIOBootOption is a component property, they ARE involved in the render process.
I think you intended no renders for changes of channelIOBootOption by using useRef(or, do I misunderstand your intention?). But there IS a render for every changes of channelIOBootOption. Becaues, it is a basic mechanism of React. This does not change if you use useRef. useRef could reduce renders when its value is originated from outside of React world like user input, DOM element, and so on. Honestly, this is why I started this issue with the title Possible wrong usage of useRef ...

Please let me know if I misunderstand your intention or write something wrong.
Thank you.

[ukjinjang]

I appreciate your perspective and you make a valid point about React's re-render behavior.

But also my intent with using this pattern is to prevent the boot() function from being re-created when options change. If we look at the following example, where I haven't used this pattern and have instead added options as dependencies of useCallback, or not used useCallback at all, the useEffect hook gets re-triggered whenever boot changes.

const { boot } = useChannelIOApi();

React.useEffect(() => {
  boot();
}, [boot])

By using useRef to hold my options, I'm able to control the re-creation of boot() function, which in turn prevents unnecessary re-triggers of the effect hook. This provides an optimization that aligns more effectively with my specific needs for this component.

[a3626a]

Thank you for your kind explanation. Now I understand your intention.

Let me add my final opinion as a user of your library

For the tradeoff between predictable behavior vs rendering performance , it seems like you chose rendering performance.

In my use case, properties to ReactChannelPlugin rarely changes. First mount, user sign in and sign out. So rendering performance optimization has almost zero value in this case. (it might save less than 10ms during entire user life cycle) On the other hand, omitting user information of ChannelIO has significant business impact*, and debugging, analyzing of this library requires greater cost comparing to optimization benefits.

* We rollbacked our new build yesterday because of this.

Anyway, thank you for answering my questions.