Security News
Python Overtakes JavaScript as Top Programming Language on GitHub
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
@arthurgeron/eslint-plugin-react-usememo
Advanced tools
This plugin enforces the wrapping of complex objects or functions (which might generate unnecessary renders or side-effects) in `useMemo` or `useCallback`. It also allows you to programmatically enforce the wrapping of functional components in `memo`, and
This plugin enforces the wrapping of complex objects or functions (which might generate unnecessary renders or side-effects) in useMemo
or useCallback
. It also allows you to programmatically enforce the wrapping of functional components in memo
, and that all props and dependencies are wrapped in useMemo
/useCallback
.
The objective is to ensure that your application's component tree and/or expensive lifecycles (such as React Native's FlatLists, useEffect, useMemo, etc.) only re-calculate or render again when absolutely necessary. By controlling expensive expressions, you can achieve optimal scalability and performance for your application.
Note: Use of memoization everywhere is not advised, as everything comes with a cost. Overusing memoization might slow down your application instead of speeding it up.
Here are two primary rules for situations where dynamic objects should be memoed:
It is not recommended to use memoization in the following cases:
Example for better understanding:
Incorrect
function Component() {
const breakpoints = [100];
return <Modal breakpoints={breakpoints}>
}
Correct
const breakpoints = [100];
function Component() {
return <Modal breakpoints={breakpoints}>
}
For more details, please refer to React Native's documentation on the importance of using static or memoized props for complex children.
Install it with yarn:
yarn add @arthurgeron/eslint-plugin-react-usememo --dev
or npm:
npm install @arthurgeron/eslint-plugin-react-usememo --save-dev
Add the plugin to your eslintrc
file:
"plugins": ["@arthurgeron/react-usememo"],
Then enable any rules as you like:
"rules": {
"@arthurgeron/react-usememo/require-usememo": [2],
},
In this guide, we will cover three rules - require-usememo
, require-memo
, and require-usememo-children
.
require-usememo
(recommended)This rule requires complex values (objects, arrays, functions, and JSX) that get passed props or referenced as a hook dependency to be wrapped in useMemo() or useCallback().
One of the great features of this rule is its amazing autofix functionality. It intelligently wraps necessary components with useMemo() or useCallback(), making your code more efficient and saving you valuable time.
For detailed examples, options available for this rule, and information about the autofix functionality, please refer to our rules documentation.
require-memo
This rule requires all function components to be wrapped in React.memo()
.
For detailed examples and usage of this rule, please refer to our rules documentation
require-usememo-children
This rule requires complex values (objects, arrays, functions, and JSX) that get passed as children to be wrapped in useMemo()
or useCallback()
.
For detailed examples and options available for this rule, please refer to our rules documentation.
By efficiently using useMemo
, useCallback
, and React.memo()
, we can optimize our React and React Native applications. It allows us to control the re-calculation and re-rendering of components, offering better scalability and performance.
FAQs
This plugin enforces the wrapping of complex objects or functions (which might generate unnecessary renders or side-effects) in `useMemo` or `useCallback`. It also allows you to programmatically enforce the wrapping of functional components in `memo`, and
The npm package @arthurgeron/eslint-plugin-react-usememo receives a total of 2,704 weekly downloads. As such, @arthurgeron/eslint-plugin-react-usememo popularity was classified as popular.
We found that @arthurgeron/eslint-plugin-react-usememo demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
Security News
Dutch National Police and FBI dismantle Redline and Meta infostealer malware-as-a-service operations in Operation Magnus, seizing servers and source code.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.