3 ms·

What? You still use hooks with Redux. And you could consider React's Context API as world state management if you really wanted to. And these still aren't intr

What? You still use hooks with Redux. And you could consider React's Context API as world state management if you really wanted to. And these still aren't intrinsically tied to a component lifecycle.

the_gipsy 4y ago
Sorry I meant useEffect. See react's official docs https://react.dev/reference/react/useEffect#what-are-good-alternatives-to-data-fetching-in-effects https://react.dev/reference/react/useEffect#what-are-good-al... They recommend using react-query (a cached fetching library) and react-router. This combination definitely uses lifecycles to fetch data in the render functions.
- robertoandred 4y ago
  Except I don't think they're using or thinking in terms of "lifecycles". With react-query for example, when you use useQuery it communicates behind the scenes via Context with the react-query singleton. It doesn't fetch data because a component has rendered, it does so because a useQuery function call has asked for data it doesn't have in its cache. That may result from a component rendering for the first time, or because that component's props changed, or because some piece of state somewhere in the app changed, etc etc. In the end it doesn't matter. It's not about a component's "lifecycle", it's responding to a change in lowercase-s state.
  - the_gipsy 4y ago
    It absolutely does fetch because it has rendered. The route changes (or user clicks, whatever), a new component renders and it fetches the first time it renders. This is not a technicality, which is why the thing is called useEffect. It does not fetch without rendering, once.
    - robertoandred 4y ago
      Except your first useQuery call happens before the component it’s in even returns any JSX for React to render. And you don’t need a useEffect to do this sort of thing. You just need a function that creates a promise keyed to whatever identifier you passed in and some state to hold its status and result.
      - the_gipsy 4y ago
        After the component gets mounted, in render code. Yes you don't need useEffect. But the alternative is something like redux, where you're components are not (self-contained) components anymore. And the docs recommend effectful libraries.
        robertoandred 4y ago
        A component can't render before it's generated markup to render. And no, you don't need useEffect or Redux. You need a promise and some state to track it. Things like react-query aren't "effectful".
        the_gipsy 4y ago
        > A component can't render before it's generated markup to render. So nothing ever renders. > And no, you don't need useEffect or Redux. You need a promise and some state to track it. Things like react-query aren't "effectful". Of course a Promise is a side effect. You're talking bullshit.
        robertoandred 4y ago
        Things render after they've generated what they want to render, not before. If you want to render the result of 2 + 2, you have to run that calculation before you can render the result. When you call useQuery, you immediately and synchronously get the status of that query so that you can use it when generating the JSX you're returning to render. And a side effect and useEffect are not at all the same thing. You're conflating generic software terms with APIs that have very specific meanings and functions within React.

What? You still use hooks with Redux. And you could consider React's Context API as world state management if you really wanted to. And these still aren't intrinsically tied to a component lifecycle.

the_gipsy 4y ago

Sorry I meant useEffect. See react's official docs https://react.dev/reference/react/useEffect#what-are-good-alternatives-to-data-fetching-in-effects https://react.dev/reference/react/useEffect#what-are-good-al... They recommend using react-query (a cached fetching library) and react-router. This combination definitely uses lifecycles to fetch data in the render functions.

robertoandred 4y ago
Except I don't think they're using or thinking in terms of "lifecycles". With react-query for example, when you use useQuery it communicates behind the scenes via Context with the react-query singleton. It doesn't fetch data because a component has rendered, it does so because a useQuery function call has asked for data it doesn't have in its cache. That may result from a component rendering for the first time, or because that component's props changed, or because some piece of state somewhere in the app changed, etc etc. In the end it doesn't matter. It's not about a component's "lifecycle", it's responding to a change in lowercase-s state.
- the_gipsy 4y ago
  It absolutely does fetch because it has rendered. The route changes (or user clicks, whatever), a new component renders and it fetches the first time it renders. This is not a technicality, which is why the thing is called useEffect. It does not fetch without rendering, once.
  - robertoandred 4y ago
    Except your first useQuery call happens before the component it’s in even returns any JSX for React to render. And you don’t need a useEffect to do this sort of thing. You just need a function that creates a promise keyed to whatever identifier you passed in and some state to hold its status and result.
    - the_gipsy 4y ago
      After the component gets mounted, in render code. Yes you don't need useEffect. But the alternative is something like redux, where you're components are not (self-contained) components anymore. And the docs recommend effectful libraries.
      - robertoandred 4y ago
        A component can't render before it's generated markup to render. And no, you don't need useEffect or Redux. You need a promise and some state to track it. Things like react-query aren't "effectful".
        the_gipsy 4y ago
        > A component can't render before it's generated markup to render. So nothing ever renders. > And no, you don't need useEffect or Redux. You need a promise and some state to track it. Things like react-query aren't "effectful". Of course a Promise is a side effect. You're talking bullshit.
        robertoandred 4y ago
        Things render after they've generated what they want to render, not before. If you want to render the result of 2 + 2, you have to run that calculation before you can render the result. When you call useQuery, you immediately and synchronously get the status of that query so that you can use it when generating the JSX you're returning to render. And a side effect and useEffect are not at all the same thing. You're conflating generic software terms with APIs that have very specific meanings and functions within React.