问题标签 [usecallback]

I can not fulfill all the conditions:

1. I need some function inside useCallback, because I set it as props to child component (for re-render preventing)
2. I need to use debounce, because my function is "end point" and can be called ~100times/sec
3. I need to get current (actual values) after debounce.

I have problem with last point, my values after debounce (1000ms) is outdated.

How to get current values using useCallback + debounce ? (values in alert must to be same as page)

map我有一个通过函数在页面加载时呈现的图像列表。我希望能够选择一张或多张图像，并突出显示它们。此外，所选图像的标题将显示在页面顶部。我遇到的问题是每次选择图像时列表似乎都会重新呈现。这是组件：

我想知道是否是因为每次选择/取消选择图像时我都在更改imageTitles数组的大小（以及因此的值）。index

我也试过useCallback这样：

但它似乎没有奏效。我的猜测是因为imagetitles每次都在变化。

那么，是否有可能（出于性能原因）避免每次选择/取消选择图像时重新渲染图像列表？

我正在尝试使用 Typescript 和 useCallback，但我遇到了这个错误

Expected 0 arguments, but got 1

这是我的代码

知道如何解决吗？

我正在做我的反应原生应用程序的通知页面。它具有无限滚动和“拉动刷新”选项。进入它工作的页面，它也可以拉动刷新。当我向下滚动时会出现问题，因为它似乎调用服务器来获取新通知，但它没有连接到数组。

如果我滚动到结束它会触发“fetchMoreNotifications”功能，我会在控制台中得到这个：

如您所见，即使我之前保存了通知，它也会显示“现有 0 个元素的数组”。也许它与 useCallback 的依赖关系有一些问题？

问题摘要 您好团队，我是 Polaris 的新手，并尝试使用以下代码创建反应注册表单

当 Onchange 所有值都得到更新但使用 onsubmit useCallback 我只得到使用 useState 分配的旧值时，我尝试使用 onsubmit 作为正常功能，如下面的代码

预期行为 由于我想将所有数据发送到 API，请教我如何使用 useCallback 执行此操作，否则我可以使用正常的 onSubmit 函数

我正在尝试创建一个使用函数的自定义钩子useCallback 函数。这是一个玩具示例：

我对依赖列表的理解是，我只需要添加函数直接使用的变量（本例中为linkInfo）。但是，如果我也不将link（传递给自定义钩子函数）添加到列表中，那么我最终会得到linkInfo. 谁能帮助解释为什么我需要将 add'l 变量添加到依赖项中？这是正确的使用方法useCallback吗？

谢谢！

我正在尝试使用 setParams 传递一个函数来处理我的 navigationOptions 中的按钮单击，但我的应用程序反而冻结了。这是我的代码，任何帮助将不胜感激。谢谢

我有加载多个数据集的情况；用户可以选择加载多少。所有数据集都呈现在同一个图表上。数据集单独和异步加载。

代码类似于

我还没有尝试让每个数据集都是一个不向 DOM 呈现任何内容的 React 组件，然后它可以管理自己的加载状态。这实际上可能更容易。

为什么将函数表达式传递到 useEffect 依赖数组时会创建无限循环？函数表达式不会改变组件状态，它只是引用它。

如果标记改变了状态，我可以理解为什么它会创建一个无限循环，但它并没有简单地引用 section 属性。

对于那些寻找这个问题的解决方案的人

所以我不是在寻找这个问题的代码相关答案。如果可能的话，我正在寻找关于为什么会发生这种情况的详细解释。

我对为什么更感兴趣，然后只是简单地找到解决问题的答案或正确方法。

为什么在 useEffect 之外声明的 useEffect 依赖数组中传递函数会导致在所述函数中状态和道具都未更改时重新渲染。

TL;DR

Why is useCallback defined as (roughly)

instead of like this?

It seems like it would solve unnecessary rerenders, while always working with the most recent version of the function. I also heard that Vue 3 optimizes in this exact same way using the cacheHandlers option.

Contextually explained version

When writing react components/hooks/contexts, you can either just write functions directly:

…or optimize for minimal rerenders using useCallback:

Myself I tend to use useCallback often, but as a teacher, I don't teach my students this from the start. It’s an extra complication, and is as far as. I know officially considered only a performance concern. It’s just useMemo, nothing more.

But when you start combining effects and functions, it can become critical, such as in:

^^ this is technically incorrect (e.g. the linter will complain), but then, putting bootstrapAuth in the dependencies array is even worse, because it will rerun on every render. There seem to be three solutions:

1. Use useCallback. But that violates the principle that it’s just a performance concern, and I don’t see how this is not a widespread problem in the react community. I usually choose this approach.

2. Make bootstrapAuth idempotent, i.e. running it more often than necessary doesn’t cause additional effects. Making functions idempotent is always smart, but it seems like a weird band-aid given that it totally defies the effect hook. Surely this isn’t the general solution.

3. Use a ref, like so (although the example is a bit contrived):

This last “trick”, although a bit contrived here, does seem to be a go-to approach in helper hook libraries, and I’ve been using it a lot myself, pretty much whenever I introduce a hook that accepts a callback. And it makes you wonder, why didn’t the React team just define useCallback like so, in the very first place??