首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

来自useSelector的数据会导致无限重新呈现为依赖项

是指在React中使用Redux的useSelector钩子函数时,如果返回的数据发生变化,会导致组件重新渲染,从而可能引发无限循环重新渲染的问题。

useSelector是Redux提供的一个用于从Redux store中获取数据的钩子函数。它接收一个回调函数作为参数,该回调函数用于从store中选择需要的数据。当选择的数据发生变化时,组件将重新渲染。

然而,如果在回调函数中使用了其他的useSelector钩子函数,并且这些钩子函数的依赖项与当前的useSelector钩子函数的依赖项有交集,就会导致无限重新呈现的问题。因为每次重新渲染都会触发所有的useSelector钩子函数,从而形成一个循环。

为了解决这个问题,可以使用React的memo函数或useMemo钩子函数来优化组件的性能。memo函数可以将组件包裹起来,使其只在props发生变化时才重新渲染。而useMemo钩子函数可以缓存计算结果,只在依赖项发生变化时才重新计算。

另外,还可以使用reselect库来创建可记忆的选择器,它可以缓存选择器的结果,只在选择器的输入发生变化时才重新计算。这样可以避免不必要的重新计算和重新渲染。

总结起来,当使用useSelector时,需要注意以下几点:

  1. 避免在回调函数中使用其他的useSelector钩子函数,以免形成循环依赖。
  2. 使用memo函数或useMemo钩子函数来优化组件的性能,避免不必要的重新渲染。
  3. 可以考虑使用reselect库来创建可记忆的选择器,提高选择器的性能。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足各种业务需求。产品介绍链接
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务。产品介绍链接
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。产品介绍链接
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助连接和管理物联网设备。产品介绍链接
  • 腾讯云区块链(BCS):提供安全、高效的区块链服务,支持快速搭建和管理区块链网络。产品介绍链接
  • 腾讯云音视频(A/V):提供高品质的音视频通信和处理服务,支持实时音视频通话、录制、转码等。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Redux with Hooks

和submitFormData prop被隐式地更新,造成useEffect依赖检查失效,组件re-render时会重复请求后台数据。...然而,这种方法虽然可行,但却是一种欺骗React行为(我们明明依赖来自propsqueryFormData和formId),很容易埋坑(见React官方Hooks FAQ)。...memorized版本,只要依赖不变,memorized函数就不会更新。...利用这一特点我们可以把useEffect中要调用逻辑使用useCallback封装到外部,然后只需要在useEffect依赖里添加memorized函数,就可以正常运作了。...其返回值作为useSelector返回值,但与mapStateToProps不同是,前者可以返回任何类型值(而不止是一个对象),此外没有第二个参数ownProps(因为可以在组件内通过闭包拿到)

3.3K60

精读《React Hooks 数据流》

这个原因是 Counter.useContainer 提供数据流是一个引用整体,其子节点 foo 引用变化后会导致整个 Hook 重新执行,继而所有引用它组件也重新渲染。...答案是变,因为 user 对象在每次数据流更新都会变,useSelector 在 deepEqual 作用下没有触发重渲染,但因为全局 reducer 隐去组件自己重渲染依然重新执行此函数,此时拿到...userSelector 一层层进行缓存,当第一个参数返回 state.user 引用不变时,直接返回上一次执行结果,直到其应用变化了才会继续往下执行。...结合外部变量缓存查询 如果我们要查询用户来自于不同地区,需要传递 areaId 加以识别,那么可以拆分为两个 Selector 函数: import { createSelector } from...与 useSelector 结合使用,useMemo 处理外部变量依赖引用缓存,useSelector 处理 Store 相关引用缓存。

73320
  • 在React项目中全量使用 Hooks

    ,分别有type和 payload 两个参数,type用来决定更新什么数据,payload 则是更新数据。...当然这个不只是状态改变,在任何导致组件重新渲染,而且又要改变 DOM情况下都是 useLayoutEffect使用场景。...,带来一个冲突,所以我们需要一个能在函数组件声明周期内部变量,可以使用 useState 中 state 但是 state 发生变化组件也随之刷新,在有些情况是不需要刷新,只是想单纯存一个值...payload)); }, [userInfo]); return ( )}useCallback 会在二个参数依赖发生改变后才重新更新...,如果将此函数传递到子组件时,每次父组件渲染此函数更新,就会导致子组件也重新渲染,可以通过传递第二个参数以避免一些非必要性渲染。

    3K51

    158. 精读《Typescript 4》

    ,以往我们会通过枚举方式,先枚举第一个参数数组中每一: function concat(arr1: [], arr2: []): [A]; function concat(arr1: [...优化自动导入, 现在 package.json dependencies 字段定义依赖将优先作为自动导入依据,而不再是遍历 node_modules 导入一些非预期包。...拿笔者场景来说,函数 useDesigner 作为自定义 React Hook 与 useSelector 结合支持 connect redux 数据值,其调用方式是这样: const nameSelector...,上面的例子只支持到了三个参数,如果传入了第四个参数则函数定义失效,因此业界做法一般是定义十几个重载,这样导致函数定义非常冗长。...当然可能存在不用枚举就可以支持无限长度入参类型解析方案,因笔者水平有限,暂未想到更好解法,如果你有更好解法,欢迎告知笔者。

    77120

    【小狮子前端】「Redux」概念理解+实战上手(内含大量实例)

    我来总结一下不用react-redux可能遇到头痛问题比如: 1.store并不是那么显而易见,一旦组件层级变得更复杂,这个store就会变得很难控制。...,可能导致性能问题,除非用大量useCallback()来包裹 - 如果代码依赖于mapStateToProps中ownProps,那么你可能会使用redux hooks编写更多代码,而不能直接拿到这个属性...- 不能像以前那样在mapDispatchToProps中,为action creator提供依赖注入 对于有可能是复杂应用:许多公司项目大部分都是用redux管理状态,他许多优点比如单一数据源...批处理更新,使得多个useSelector()重新计算出state,组件只会重新渲染一次,不用担心useSelector重复渲染问题。...但是还是用connect实例,来重新用react-reduxuseSelector和useDispatch实现。

    1.4K00

    突破Hooks所有限制,只要50行代码

    你是否很讨厌Hooks调用顺序限制(Hooks不能写在条件语句里)? 你是否遇到过在useEffect中使用了某个state,又忘记将其加入依赖导致useEffect回调执行时机出问题?...根本原因在于React没有将Hooks实现为响应式更新。 是实现难度很高么?本文会用50行代码实现无限制版Hooks,其中涉及知识也是Vue、Mobx等基于响应式更新底层原理。...state改变,useEffect回调执行 不需要显式指定依赖(即React中useEffect第二个参数) 举个例子: const [count, setCount] = useState(0)...当下次执行setCount(setter)时会通知订阅了count变化useEffect,执行其回调函数。 数据结构之间关系如图: ?...自动依赖跟踪,是不是很酷~ ? 总结 至此,基于「订阅发布」,我们实现了可以「自动依赖跟踪」无限制Hooks。 这套理念是最近几年才有人使用么?

    88310

    react源码分析:深度理解React.Context

    题外话:React.memo 只会针对 props 做优化,如果组件中 useContext 依赖 context value 发生变化,组件依旧进行重渲染。...这里可能会有一些陷阱:当注册 Provider 父组件进行重渲染时,导致消费组件触发意外渲染。...从「注意事项」可以考虑:要想使消费组件进行重渲染,context value 必须返回一个全新对象,这将导致所有消费组件都进行重渲染,这个开销是非常大,因为有一些组件所依赖值可能并未发生变化。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖 state 前后是否发生变化)。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖 state 前后是否发生变化)。

    92740

    面试官:如何解决React useEffect钩子带来无限循环问题

    因此,许多新手开发人员在配置他们useEffect函数时,导致无限循环问题。在本文中,您将了解不同场景下带来无限循环问题以及如何解决它们。...这是我们今天要学习内容: 是什么导致无限循环以及如何解决它们: 在依赖项数组中不传递依赖 使用函数作为依赖 使用数组作为依赖 使用对象作为依赖 传递不正确依赖 什么导致无限循环以及如何解决它们...因此,这里应用程序将在每次渲染时执行setCount函数。因此,这会导致一个无限循环: 是什么导致了这个问题?让我们一步一步来分析这个问题: 在第一次渲染时,React检查count值。...是什么导致了这个问题? 既然myArray值在整个程序中都没有改变,为什么我们代码多次触发useEffect ? 在这里,回想一下React使用浅比较来检查依赖引用是否发生了变化。...这将返回一个可变对象,确保引用不会改变: }, [myArray]); //依赖值是稳定,所以没有无限循环 使用对象作为依赖 在useEffect依赖数组中使用对象也导致无限循环问题。

    5.2K20

    前端框架:性能与灵活性取舍

    其中争论比较大是下面两: 性能之争 API设计之争 比如,各大新兴框架都会掏出benchmark证明自己优秀运行时性能,在这些benchmark中React通常是垫底存在。...性能瓶颈主要发生在更新时,所以性能优化方向主要有两个: 减少不必要更新 减少每次更新时要遍历子树 像Redux语境下useSelector就是第一条路。...,且每秒发生变化,则更新时Counter不会被跳过(表现为Counter每秒都会render)。...}, []); } 通过包裹依赖为空React.useMemo,useObservable返回实际是个「永远不会变值」。...'true' : 'false'} Computed相当于一个容器,监听children中状态变化,并触发React更新。

    59340

    数据结构学习笔记——算法

    算法:算法是解决特定问题求解步骤描述,在计算机中表现为指令有限序列,并且每条指令表示一个或多个步骤。 算法定义 指令:能被人或者计算机装置执行。...2、有穷性 指算法在执行有限步骤之后,自动结束而不会出现无限循环,并且每一个步骤在可接受时间内完成。 关键在与步骤有限。 3、确定性 算法每一个步骤都具有确定含义,不会出现二义性。...抛开外部原因,影响算法执行效率主要依赖于 算法好坏 和 问题输入规模; 测定运行时间最可靠方法是计算对运行时间有消耗基本操作执行次数。...最高次指数越大,随着n增长,结果也变得增长得特别快。 综上,我们可以得出一个结论: 判断算法效率时,函数中常数项和其他次要项常常可以忽略,而只关心最高阶得阶数。...5、对数阶 O(log n) 一般是循环过程中,循环判断条件指数变化。 6、平方阶 O(n²) 嵌套循环中,内层循环条件初始值为外层条件当前值。 常见时间复杂度 ?

    47310

    react源码之深度理解React.Context

    题外话:React.memo 只会针对 props 做优化,如果组件中 useContext 依赖 context value 发生变化,组件依旧进行重渲染。...这里可能会有一些陷阱:当注册 Provider 父组件进行重渲染时,导致消费组件触发意外渲染。...从「注意事项」可以考虑:要想使消费组件进行重渲染,context value 必须返回一个全新对象,这将导致所有消费组件都进行重渲染,这个开销是非常大,因为有一些组件所依赖值可能并未发生变化。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖 state 前后是否发生变化)。...提供给 Context.Provider value 对象地址不会发生变化,这使得子组件中使用了 useSelector -> useContext,但不会因顶层数据而进行重渲染。

    1.2K30

    为什么我不再用Redux了

    我们前端应用程序真的那么复杂吗,还是说我们试图用 Redux 做事情太多了? 单页应用程序问题 React 这样单页应用程序(SPA)现为我们开发 Web 应用程序方式带来了许多变化。...现在,前端开发中很大一部分负担来自于我们全局存储维护工作,我们还要确保这些存储不会遭受状态错误、数据非规范化和陈旧数据困扰。...我们获取数据,通过 reducer/action 将其添加到存储中,并定期重新获取以确保它是最新。我们用 Redux 做事情太多了,甚至把它看成是解决问题全面解决方案。...但是,同步缓存和保持状态是非常复杂,因此我们不应该像 Redux 鼓励那样,从头开始重新创建这个后端状态。 当我们开始在前端重新创建数据库时,后端和前端之间职责界限很快就变得模糊不清。...如果我们不再在前端代码中管理后端状态,而只是将其视为需要定期更新缓存怎么样呢?将前端视为从缓存读取内容简单显示层后,我们代码就会变得更加易用,并且更适合纯前端开发人员阅读。

    2.6K20

    用 Redux 做状态管理,真的很简单🦆!

    灵活: Redux 可与任何 UI 层框架搭配使用,它体小精干(只有 2kB,包括依赖),并且有 庞大插件生态 来实现你需求。...Store(存储) 中 单一数据源使得同构应用开发变得容易,将状态在统一 对象树 中维护管理也更加容易!...),state 根据发生事情进行更新,生成新 state 基于新 state 重新渲染 View (3) 不可变性(Immutability) 对于状态(state)描述一般都是一个大 JavaScript...,使得对象是可以修改,Redux 想要记录每一个状态,如果直接修改 state 中引用类型属性,势必会导致 state 变化不可追溯和预测。...useSelector() 和 useDispatch() 可以在我们自定义 Counter 组件中消费 counter 状态(数据) //文件位置:src/pages/counter/index.tsx

    3.4K40

    react源码分析:深度理解React.Context_2023-02-07

    题外话:React.memo 只会针对 props 做优化,如果组件中 useContext 依赖 context value 发生变化,组件依旧进行重渲染。...这里可能会有一些陷阱:当注册 Provider 父组件进行重渲染时,导致消费组件触发意外渲染。...从「注意事项」可以考虑:要想使消费组件进行重渲染,context value 必须返回一个全新对象,这将导致所有消费组件都进行重渲染,这个开销是非常大,因为有一些组件所依赖值可能并未发生变化。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖 state 前后是否发生变化)。...提供给 Context.Provider value 对象地址不会发生变化,这使得子组件中使用了 useSelector -> useContext,但不会因顶层数据而进行重渲染。

    67410

    react源码分析--深度理解React.Context

    题外话:React.memo 只会针对 props 做优化,如果组件中 useContext 依赖 context value 发生变化,组件依旧进行重渲染。...这里可能会有一些陷阱:当注册 Provider 父组件进行重渲染时,导致消费组件触发意外渲染。...从「注意事项」可以考虑:要想使消费组件进行重渲染,context value 必须返回一个全新对象,这将导致所有消费组件都进行重渲染,这个开销是非常大,因为有一些组件所依赖值可能并未发生变化。...react-redux useSelector 则是采用订阅 redux store.state 更新,去通知消费组件「按需」进行重渲染(比较所依赖 state 前后是否发生变化)。...提供给 Context.Provider value 对象地址不会发生变化,这使得子组件中使用了 useSelector -> useContext,但不会因顶层数据而进行重渲染。

    93740

    将 UseMemo 与 UseEffect 结合使用时避免无限循环

    useEffect(设置,依赖?)这setup是一个函数,每次dependencies更改数组中某些值时都会运行。...,count触发值重新计算。...随后,useEffect 被触发,因为它取决于更新值。 这一系列事件可能导致无限循环。cachedMemocountcachedMemo另一个例子是获取数据时。...此设置创建潜在无限循环:postId触发 useEffect 更改,并且在每次渲染期间重新计算记忆cachedMemo值,可能导致重复调用效果。为了避免无限循环,最好仔细考虑整体流程。...因此,退后一步并理解代码不同部分之间交互可以帮助我们避免无限循环并决定真正需要包含哪些依赖我正在参与2024腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!

    14200

    React Hooks 快速入门与开发体验(二)

    而重渲染又会再次触发 setRenderCount……从而无限循环触发,导致运行情况与我们想要效果不太一样。 2....,每次增加 state 后找到这里添加依赖只是一潜规则,参与项目的人越多、修改次数越多,出错概率就越大。...导致不管重新渲染几次,页面上计数始终为0。...但是需要注意 setState 时必须使用原对象而非新对象(比如使用解构赋值创建新对象),否则会导致此对象 state 依赖对比不通过,触发重渲染从而又导致无限更新。...---- 小结 问题根本在于副作用内更新 state 时,state 变化直接或间接地影响了副作用自身触发条件,从而导致副作用被无限触发。

    1K10
    领券