5 ms·

A couple of things make React extremely valuable to me: - The functional programming model (State => UI) allows building very complicated interfaces in a very

by kennu 3y ago

A couple of things make React extremely valuable to me: - The functional programming model (State => UI) allows building very complicated interfaces in a very simple way, by defining dependencies with useEffect() and other hooks. It can take years to master it, but when you develop complex apps where all kinds of state needs to update when some other state changes, you really appreciate how simple it is to do with React. - React is very backward compatible and allows you to migrate codebases to newer React features slowly over the years, while already using those new features in other parts of the code. (I still have some class-based components here and there.) - There is a huge ecosystem of existing React components and tools you can use in your applications. They make it a very productive environment to get stuff done quickly. Frameworks like Next.js make it a breeze to develop and deploy static apps e.g. to S3. - You can apply your existing React skills to React Native when you need native apps.

scotty79 3y ago
> defining dependencies with useEffect() Please don't. useEffect() is for pluging 3rd party DOM components into react. Not for doing anything else. Definitely not for any state manipulation or dependencies.
- kennu 3y ago
  React documentation lists a lot of other use cases for useEffect() than just that: - useEffect is a React Hook that lets you synchronize a component with an external system. - Connecting to an external system - Wrapping Effects in custom Hooks - Controlling a non-React widget - Fetching data with Effects - Specifying reactive dependencies - Updating state based on previous state from an Effect - Removing unnecessary object dependencies - Removing unnecessary function dependencies - Reading the latest props and state from an Effect - Displaying different content on the server and the client https://react.dev/reference/react/useEffect#specifying-reactive-dependencies https://react.dev/reference/react/useEffect#specifying-react...
  - scotty79 3y ago
    Just because you can doesn't mean you should. What you should have gotten from this list of every possible use (and misuse) of useEffect is that it's for interaction with external things. And if you are doing a lot of interafacing with external stuff you should use a dedicated service for it, not pollute your code with ad-hoc bits of interaction, each wrapped in their own bespoke useEffect(). And the linked section talks about specifying dependencies of the code block inside useEffect() You don't define dependencies WITH useEffect. You define dependencies OF useEffect. And you don't have much choice in the matter. Any local variable (also parameter) of render function needs to be a dependency of useEffect code. As this section states. Here are some common misuses: https://react.dev/learn/you-might-not-need-an-effect https://react.dev/learn/you-might-not-need-an-effect
    - kennu 3y ago
      You can overuse useEffect() for sure. But I don't know how else you'd react e.g. to the page query string parameters or component properties changing, when the rendered content depends on them.
      - scotty79 3y ago
        You use a router or you have a service that watches history api and dispatches Redux actions. React is UI library. Just because it can do a lot doesn't mean it should do everything. Especially in larger apps.
        kennu 3y ago
        Yeah and then the router sends you property changes which you react to with useEffect().
        scotty79 3y ago
        The whole point is not to use it directly in your components. It is implementation detail of that particular router. You might use router that interfaces with Redux not React directly. Or you could write your router in the form of a service that lives directly in the history api event handlers and communicates directly though react state setters of some top-level component. Not a single useEffect needed. Besides, router doesn't usually send you anything. It just sets props on your components according to url.

by kennu 3y ago

scotty79 3y ago

> defining dependencies with useEffect() Please don't. useEffect() is for pluging 3rd party DOM components into react. Not for doing anything else. Definitely not for any state manipulation or dependencies.

kennu 3y ago
React documentation lists a lot of other use cases for useEffect() than just that: - useEffect is a React Hook that lets you synchronize a component with an external system. - Connecting to an external system - Wrapping Effects in custom Hooks - Controlling a non-React widget - Fetching data with Effects - Specifying reactive dependencies - Updating state based on previous state from an Effect - Removing unnecessary object dependencies - Removing unnecessary function dependencies - Reading the latest props and state from an Effect - Displaying different content on the server and the client https://react.dev/reference/react/useEffect#specifying-reactive-dependencies https://react.dev/reference/react/useEffect#specifying-react...
- scotty79 3y ago
  Just because you can doesn't mean you should. What you should have gotten from this list of every possible use (and misuse) of useEffect is that it's for interaction with external things. And if you are doing a lot of interafacing with external stuff you should use a dedicated service for it, not pollute your code with ad-hoc bits of interaction, each wrapped in their own bespoke useEffect(). And the linked section talks about specifying dependencies of the code block inside useEffect() You don't define dependencies WITH useEffect. You define dependencies OF useEffect. And you don't have much choice in the matter. Any local variable (also parameter) of render function needs to be a dependency of useEffect code. As this section states. Here are some common misuses: https://react.dev/learn/you-might-not-need-an-effect https://react.dev/learn/you-might-not-need-an-effect
  - kennu 3y ago
    You can overuse useEffect() for sure. But I don't know how else you'd react e.g. to the page query string parameters or component properties changing, when the rendered content depends on them.
    - scotty79 3y ago
      You use a router or you have a service that watches history api and dispatches Redux actions. React is UI library. Just because it can do a lot doesn't mean it should do everything. Especially in larger apps.
      - kennu 3y ago
        Yeah and then the router sends you property changes which you react to with useEffect().
        scotty79 3y ago
        The whole point is not to use it directly in your components. It is implementation detail of that particular router. You might use router that interfaces with Redux not React directly. Or you could write your router in the form of a service that lives directly in the history api event handlers and communicates directly though react state setters of some top-level component. Not a single useEffect needed. Besides, router doesn't usually send you anything. It just sets props on your components according to url.