> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 最佳实践
本文档概述了在前端工作时应遵循的最佳实践。
## 状态管理
React 和 Jotai 在代码库中处理状态管理。
### 使用 Jotai 原子来存储状态
根据需要创建足够多的原子来存储你的状态，是一种良好实践。
与其为了通过 props 层层传递而过度精简，不如使用额外的原子。
```tsx theme={null}
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
export const myAtomState = createAtomState({
key: 'myAtomState',
defaultValue: 'default value',
});
export const MyComponent = () => {
const [myAtom, setMyAtom] = useAtomState(myAtomState);
return (
setMyAtom(e.target.value)}
/>
);
}
```
### 不要使用 `useRef` 来存储状态
避免使用 `useRef` 来存储状态。
如果想存储状态，应该使用 `useState` 或配合 `useAtomState` 的 Jotai 原子。
如果您觉得需要通过使用 `useRef` 来防止一些再渲染，请了解[如何管理再渲染](#managing-re-renders)。
## 管理再渲染
在 React 中管理再渲染可能很困难。
这里有一些规则以帮助避免不必要的再渲染。
请记住，通过了解其原因，可以**始终**避免再渲染。
### 在根级别工作
通过从根级消除它们，现在在新功能中避免再渲染变得容易。
`PageChangeEffect` sidecar 组件只包含一个 `useEffect` ，它持有页面更改时要执行的所有逻辑。
这样您就知道只有一个地方可以触发再渲染。
### 在代码库中添加 `useEffect` 之前总是考虑一次
重新渲染往往是由不必要的“使用效果”造成的。
您应该想一想您是否需要`useEffect`，或者您是否可以在事件处理函数中移动逻辑。
你会发现移动一个 "handleClick" 或 "handleChange" 函数中的逻辑通常很容易。
您还可以在如 Apollo 的库中找到它们：`onCompleted`，`onError` 等。
### 使用一个兄弟组件提取`useEffect`或数据获取逻辑。
如果你觉得需要在你的根组件中添加 "useEffect" ，你应该考虑在侧边组件中提取它。
对于数据获取逻辑也可以采用相同的方法，使用 Apollo hooks。
```tsx theme={null}
// ❌ Bad, will cause re-renders even if data is not changing,
// because useEffect needs to be re-evaluated
export const PageComponent = () => {
const [data, setData] = useAtomState(dataState);
const [someDependency] = useAtomState(someDependencyState);
useEffect(() => {
if(someDependency !== data) {
setData(someDependency);
}
}, [someDependency]);
return
{data}
;
};
export const App = () => (
);
```
```tsx theme={null}
// ✅ Good, will not cause re-renders if data is not changing,
// because useEffect is re-evaluated in another sibling component
export const PageComponent = () => {
const [data, setData] = useAtomState(dataState);
return