https://github.com/xnimorz/use-handler

React-hook, that returns handler only once while component mounted. Your reference for a function won't be changed. It's useful for optimizations. Note: you can use useCallback hook, that is already included in react instead of custom useHandler hook. You can see example with useHandler and useCallback hooks here: https://codesandbox.io/s/vjko8kroyl
https://github.com/xnimorz/use-handler

handler hook optimization react

Last synced: about 2 months ago
JSON representation

React-hook, that returns handler only once while component mounted. Your reference for a function won't be changed. It's useful for optimizations. Note: you can use useCallback hook, that is already included in react instead of custom useHandler hook. You can see example with useHandler and useCallback hooks here: https://codesandbox.io/s/vjko8kroyl

• Host: GitHub
• URL: https://github.com/xnimorz/use-handler
• Owner: xnimorz
• License: mit
• Created: 2019-01-25T07:24:05.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-28T12:19:48.000Z (almost 6 years ago)
• Last Synced: 2024-10-31T05:51:43.431Z (2 months ago)
• Topics: handler, hook, optimization, react
• Language: JavaScript
• Homepage:
• Size: 33.2 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Note: you can use useCallback hook, that is already included in react instead of custom useHandler hook.

You can see example with useHandler and useCallback hooks here: https://codesandbox.io/s/vjko8kroyl

# useHandler react hook

Install it with yarn:

```

yarn add use-handler

```

Or with npm:

```

npm i use-handler --save

```

## Demo

This hook is useful for optimizations. During developing you can face with the performance issue, that you can solve changing your components to PureComponents. But if you pass callbacks as plain functions in JSX code you will get different references and your component will be walk through whole updating lifecycle. This hook allows you to cache function and use the same function with the same reference.

The simplest example with useHandler and without it you can get here: https://codesandbox.io/s/vjko8kroyl

## Simple example

In this example react won't change the subscribtion function after each updating lifecycle:

```javascript

import React, { useState } from 'react';

import { useHandler } from 'use-handler';

export default function Input() {

  const [text, setText] = useState('Hello');

  const onChange = useHandler((e) => {

    setText(e.target.value);

  });

  return (

    


      

      
Actual value: {text}

    

  );

}

```