UsePureCallback - useCallback doing right for react

Overview

usePureCallback

This is not a NPM package, this is simple snipet to copy paste it.

Just copy the code below and paste it to your project.

You can find .ts / .d.ts / js version of this code in the root of the repo.

import { useRef } from "react";

/**
 * Return a stable link to the decorated function,
 * which accept dynamic dependencies and other needed arguments
 * @example
 * // `handleChange` will always same, even if `props.onChange` changing.
 * const handleChange = usePureCallback(
 *   [props.onChange],
 *   ([onChange], event) => onChange(event.target.value)
 * )
 * @see {@link github.com/artalar/usePureCallback}
 */
export function usePureCallback<Deps extends any[], Args extends any[], Return>(
  deps: Deps,
  fn: (deps: Deps, ...args: Args) => Return
): (...args: Args) => Return {
  const argsRef = useRef({
    fn: (...args: Args) => fn(argsRef.current.deps, ...args),
    deps
  });
  argsRef.current.deps = deps;
  return argsRef.current.fn;
}

Motivation

You could memoize any kind of data, by its strict / shallow / deep / custom comparison except a function. If the function depends on some dynamic outer data, it should be recreated by each data changing and even if the function is used rarely, it will break all below memoization, which we could call a parasite immutability. To prevent this harmful behavior, we should separate 'dirty' data and function logic to mutable reference and pure function, which depend only on its arguments. The funny thing - we could do it super easy, check the code above.

Limitations

In the rare cases you need to react to the function changing (do a side effect), which looks like antipattern already, but if you still need this behavior, use native useCallback.

This code could produce errors in concurrent rendering and failed subtree rendering. I will think about the right implementation in the feature, PR / issue welcome!

Issues
Owner
Arutyunyan Artyom
javascript developer https://career.habr.com/artalar
Arutyunyan Artyom
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.9k Jan 22, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Jan 17, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 117 Aug 30, 2021
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 85 Aug 30, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 61 Nov 13, 2021
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicação PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Osvaldo Kalvaitir Filho 18 Jan 12, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 410 Dec 23, 2021
A routing library for React Native that strives for sensible API parity with react-router 🤖

React Router Native A routing library for React Native that strives for sensible API parity with react-router. Please note that React Router v4 was ju

Jake Murzy 635 Dec 14, 2021
react-native-splashscreen ★358 - A splash screen for react-native

React Native SplashScreen (remobile) A splashscreen for react-native, hide when application loaded Installation npm install @remobile/react-native-spl

YunJiang.Fang 370 Dec 25, 2021
Beautifully crafted off canvas menu components for react native applications. Built on top of react-native's Animated library.

react-native-off-canvas-menu Beautifully crafted off canvas menu components for react native applications. Features - Gesture Support Orientation Comp

Provash Shoumma 404 Dec 30, 2021
A QR Code generator for React Native based on react-native-svg and node-qrcode.

react-native-qrcode-svg A QR Code generator for React Native based on react-native-svg and javascript-qrcode. Discussion: https://discord.gg/RvFM97v F

JerryShen 803 Jan 14, 2022
react-native-egg make your react native app infinitely more fun !!

react-native-egg react-native-egg make your react native app infinitely more fun !! Implementation simple gestures detection achieve trigger easter eg

FuYaoDe 257 Dec 3, 2021
React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

React Native Image Cache HOC React Native Higher Order Component that adds advanced caching functionality to the react native Image component. Feature

Reid Mayo 277 Jan 2, 2022
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

Yu Zheng (Sam) 289 Jan 4, 2022
react-native-cache-image ★158 - A cache-image for react-native

React Native CacheImage (remobile) A cache-image for react-native When use web image, this module will find the web image's url corresponding image f

YunJiang.Fang 161 Nov 16, 2021
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 301 Jan 19, 2022
react-native-page-swiper ★83 - Page Swiper component for React Native.

react-native-page-swiper Page Swiper component for React Native. Getting Started Installation Basic Usage Properties Examples Development Installation

Fixt 90 Oct 7, 2021
react-native-photo-grid ★31 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row.

react-native-photo-grid React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row Ins

Christopher 33 Mar 11, 2021
React-Native image filters using gl-react

react-native-gl-image-filters OpenGL bindings for React Native to implement complex effects over images and components, in the descriptive VDOM paradi

Gregory Galushka 151 Jan 6, 2022