import React, { useMemo } from "react";
import * as S from "./dots.style";
function makeData(dots, shift, width) {
const normShift = shift >= 0 ? shift : shift - dots.length * shift;
return dots.map((dot, index) => ({
key: dot,
isFirst: index === 0,
isLast: index === dots.length - 1,
left: ((normShift + index) % dots.length) * width
}));
}
export const Dots = ({ dots, shift }) => {
const data = useMemo(() => makeData(dots, shift, 25), [dots, shift]);
return (
<S.Container>
{data.map(({ key, left, children }) => (
<S.Dot key={key} left={left}>
{key}
</S.Dot>
))}
</S.Container>
);
};if (state.key[objKey]) {
const copy = {...state.key};
delete copy[objKey];
return { ...state, key: copy };
}<img src={getImage(el.id)} /> поместить в отдельный реактовский компонент, например, StorageImage. Далее возможны различные варианты в зависимости от того, что используется на проекте. Наиболее простой - useQuery - это обеспечит кэширование и обновление стейта из коробки, и все остальные детали, прям вот всё что нужно для данного кейса.
const useCheckMounted = (): (() => boolean) => {
const ref = useRef(true)
useLayoutEffect(() => {
ref.current = true
return () => {
ref.current = false
}
}, [ref])
return useCallback(() => {
return ref.current
}, [ref])
}
// пример использования:
const Child: React.FC = React.memo(() => {
const check = useCheckMounted()
useEffect(() => {
console.log('check1, ', check())
setTimeout(() => {
console.log('check2, ', check())
}, 8000)
}, [check])
return <div>child</div>
})const isShallowEqualArrays = (arr1, arr2) =>
arr1 === arr2 || (arr1.length === arr2.length && arr1.every((v, i) => v === arr2[i]));
export const mainReducer = (state = initialState, action) => {
if (action.type === SET_COUNT) {
if (!isShallowEqualArrays(state.count, action.count)) {
return {
...state,
count: action.count
};
}
}
return state;
};header не меняется, я понял в чём причина, ведь он отрисовался вначале и не отрисовывался большевообще-то он должен меняться, в этом суть реакта
...
<RegulationEditWindow setIsEditing={setIsEditing} />
...interface RegulationEditWindowProps {
setIsEditing(editing: boolean): void;
}
const RegulationEditWindowView: React.FC<RegulationEditWindowProps> = React.memo((props) => {
...
<ArrowLeftOutlined onClick={() => props.setIsEditing(false)} />
...
});.some-class:hover::after {
...
}items.map(el => <div className="some-class">element</div>)const activeItem = useMemo(() => items.find((item) => item.id === activeItemId), [items, activeItemId]);