
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
use-perf-context
Advanced tools
title | content |
---|---|
系统名称 | use-perf-context |
项目负责人 | mortimerliu(阿吉) |
作者 | mortimerliu(阿吉) |
文档提交日期 | 2022.10.14 |
修订历史
版本号 | 作者 | 修订章节 | 修订原因 | 修订日期 |
---|---|---|---|---|
1.0 | mortimerliu | all | first publish | 2022.10.14 |
This is a hight performance react component, which avoid re-render of Context Component.
This implements a more refined rendering strategy and you don't feel it.
Actually, two common ways to avoid re-render are multi-layered contexts and memo components.
Nut they make number of codes too much.I don't like those ways.
I want something easy to use, and the number of my codes is less.
Then use-perf-context was born.
// App.tsx
import PerfContextProvider from "use-perf-context";
function App() {
// provide Context
return (
<PerfContextProvider state={initialState} reducer={globalReducer}>
<Header />
<YourComponents />
</PerfContextProvider>
);
}
// Header.tsx
import PerfContextProvider from "use-perf-context";
function Header() {
// consume Context
// usePerfContext<target property type constraint, dispatch's parame type constraint>
const [userInfo, dispatch] = usePerfContext<IUserInfo, IAction>("userInfo");
const { name, age } = userInfo || {};
renderCount++;
const addAge = () => {
dispatch({
type: ActionType.SET_USER_INFO,
payload: { name: "mortimer", age: Number(age) + 1 },
});
};
return (
<div className={classPrefix}>
<div>{classPrefix}</div>
<div>user name is :{name}</div>
<div>user age is :{age}</div>
<button onClick={addAge}>add age +1</button>
<div>renderCount: {renderCount}</div>
</div>
);
}
// Context Store
export interface IUserInfo {
name: string;
age: number;
}
export interface IAction {
type: ActionType;
payload?: any;
}
export enum ActionType {
SET_USER_INFO = "SET_USER_INFO",
}
export const initialState: IState = {
userInfo: {
name: "",
age: 0,
},
};
export const reducer = (state: IState, action: IAction) => {
switch (action.type) {
case ActionType.SET_USER_INFO:
return {
...state,
userInfo: action.payload,
};
default:
return state;
}
};
CodeSandBox demo: https://codesandbox.io/s/void4-context-rerender--proxy-completed-emv5n0?file=/src/store/index.tsx
FAQs
高性能 useContext, 解决re-render问题
The npm package use-perf-context receives a total of 2 weekly downloads. As such, use-perf-context popularity was classified as not popular.
We found that use-perf-context demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.