6 ms·

Is it possible to just not think about it? Or is that easier said than done?

millerm 5y ago
Yes, it's completely possible and most people don't think about it, at all. It's not complicated.
scotty79 5y ago
I think it's perfectly possible if you just don't place hooks in a loop or if, which you shouldn't do and are warned against.
recursive 5y ago
Usually it just works. But, even following the "Rules of Hooks" (https://reactjs.org/docs/hooks-rules.html https://reactjs.org/docs/hooks-rules.html), I managed to write some code where the state that belonged to one component ended up in its adjacent sibling. When that happened, I really wasn't sure what to do other than go on a deep react dive. It's not clear how to debug stuff like that. I came to realize that I had confused the reconciler. The fix is basically to just use the key= attribute everywhere, not just in arrays.
- madeofpalk 5y ago
  How did this happen? I've never seen this in practice if you weren't doing something "obviously" wrong.
  - recursive 5y ago
    Here's a minimal-ish repro of the issue I ran in to. It's totally possible that I'm doing something "obviously" wrong. However, I've spent more than a couple of hours reading through docs trying to figure out what it is. I'm not seeing it. https://codepen.io/recursive/pen/XWMLWBZ https://codepen.io/recursive/pen/XWMLWBZ If you could point to anything in the docs that I'm missing, I'd genuinely appreciate it.
    - WickyNilliams 5y ago
      I assume the issue here is that you are rendering a single nameInput instance in two places. This is definitely not idiomatic react and I can't ever think of seeing this in the wild. Just render two instances. If you want the value synced then it should be a controlled component, where the locked state is passed in as a prop.
      - recursive 5y ago
        > If you want the value synced then it should be a controlled component, where the locked state is passed in as a prop. This is the kind of stuff that's difficult for me to wrap my mind around. If I have to remember to "do it this way, but not that way", that's mental overhead. Especially when it's difficult to articulate exactly under what circumstances this problem occurs. Obviously, there are plenty of people that have no problem with it. However, my first inclinations seem to be more likely to be those that React has problems with. I'm having a difficult time "thinking in React".
        arcturus17 5y ago
        Everything you say is true for pretty much every technology?
        recursive 5y ago
        No. Some technologies use paradigms that are much more natural to me. Of course, this will vary from person to person. I'm not saying that anyone should stop using react. I'm just saying that I find it to be difficult. Specifically more difficult than other technologies.
        WickyNilliams 5y ago
        I'm not sure this is anything specific to react? Its just a question of internal vs external state. Internal state gets managed by the component itself, external state gets managed by some ancestor in the tree. One component's internal state is another's external state. No different to objects or any other data modelling exercise imo. As for rendering a single instance in two places, you'd see weird behaviour trying to do the same with raw DOM element instance (well not so weird as not being able to render in two places).

Yes, it's completely possible and most people don't think about it, at all. It's not complicated.

I think it's perfectly possible if you just don't place hooks in a loop or if, which you shouldn't do and are warned against.

recursive 5y ago

Usually it just works. But, even following the "Rules of Hooks" (https://reactjs.org/docs/hooks-rules.html https://reactjs.org/docs/hooks-rules.html), I managed to write some code where the state that belonged to one component ended up in its adjacent sibling. When that happened, I really wasn't sure what to do other than go on a deep react dive. It's not clear how to debug stuff like that. I came to realize that I had confused the reconciler. The fix is basically to just use the key= attribute everywhere, not just in arrays.

madeofpalk 5y ago
How did this happen? I've never seen this in practice if you weren't doing something "obviously" wrong.
- recursive 5y ago
  Here's a minimal-ish repro of the issue I ran in to. It's totally possible that I'm doing something "obviously" wrong. However, I've spent more than a couple of hours reading through docs trying to figure out what it is. I'm not seeing it. https://codepen.io/recursive/pen/XWMLWBZ https://codepen.io/recursive/pen/XWMLWBZ If you could point to anything in the docs that I'm missing, I'd genuinely appreciate it.
  - WickyNilliams 5y ago
    I assume the issue here is that you are rendering a single nameInput instance in two places. This is definitely not idiomatic react and I can't ever think of seeing this in the wild. Just render two instances. If you want the value synced then it should be a controlled component, where the locked state is passed in as a prop.
    - recursive 5y ago
      > If you want the value synced then it should be a controlled component, where the locked state is passed in as a prop. This is the kind of stuff that's difficult for me to wrap my mind around. If I have to remember to "do it this way, but not that way", that's mental overhead. Especially when it's difficult to articulate exactly under what circumstances this problem occurs. Obviously, there are plenty of people that have no problem with it. However, my first inclinations seem to be more likely to be those that React has problems with. I'm having a difficult time "thinking in React".
      - arcturus17 5y ago
        Everything you say is true for pretty much every technology?
        recursive 5y ago
        No. Some technologies use paradigms that are much more natural to me. Of course, this will vary from person to person. I'm not saying that anyone should stop using react. I'm just saying that I find it to be difficult. Specifically more difficult than other technologies.
      - WickyNilliams 5y ago
        I'm not sure this is anything specific to react? Its just a question of internal vs external state. Internal state gets managed by the component itself, external state gets managed by some ancestor in the tree. One component's internal state is another's external state. No different to objects or any other data modelling exercise imo. As for rendering a single instance in two places, you'd see weird behaviour trying to do the same with raw DOM element instance (well not so weird as not being able to render in two places).