Почему бесконечно перерисовывается и как сделать правильно?

Question

[Иван Шульга]

(React Hooks)
График рисуется через данные, которые лежат в редаксе, если я удаляю элемент в этих данных через экшн то начинается бесконечная перерисовка, в чем проблема?

const Chart = React.memo((props) => {
    const [data, setData] = useState(props.items.map((elem) => {
        return elem.weight
    }))
    const svgRef = useRef()

    useEffect(() => {

        setData(props.items.map((elem) => {
            return elem.weight
        }))
        const svg = select(svgRef.current)

        const xScale = scaleLinear()
            .domain([0, data.length - 1])
            .range([0, 1240])

        const yScale = scaleLinear()
            .domain([min(data), max(data)])
            .range([280, 0])
        const myLine = line()
            .x((value, index) => xScale(index))
            .y(value => yScale(value))
            .curve(curveCardinal)
        svg
            .selectAll('path')
            .data([data])
            .join('path')
            .attr('d', value => myLine(value))
            .attr('fill', 'none')
            .attr('stroke', 'lavender')
            .attr('stroke-width', '3px')
            .attr('width', '100%')
    }, [data, props.items])

    return (
        <div className={s.elem}>
            <svg viewBox={'0 -9 1240 300'}
                ref={svgRef}></svg>
        </div>
    )
})

Answer 1

[hzzzzl]

useEffect(() => {

        setData(props.items.map((elem) => {   // setData
            return elem.weight
        }))

      } , [data, props.items] })    // data?

вот тут эффект слушает изменения data, и ты в нем же меняешь data, тем самым его перезапуская..
и зачем вообще хранить data в стейте, вместо того чтобы напрямую использовать props.items из стора?

Answer 2

[Иван Шульга]

Я неправильно выразился: Я пробовал и вытаскивать setData и убирать (что мне казалось с самого начала логично), ибо следит за изменениями props.items, но вот если пропс изменяется, то как перезаписать data?

Comments

[hzzzzl]

что если так?

const Chart = React.memo(({ items = [] }) => {
    const svgRef = useRef()

    useEffect(() => {

        const data = items.map((elem) => {
            return elem.weight
        })   // дата ведь нужна только в контексте этого эффекта, и больше нигде?

        const svg = select(svgRef.current)

        const xScale = scaleLinear()
            .domain([0, data.length - 1])
            .range([0, 1240])

        const yScale = scaleLinear()
            .domain([min(data), max(data)])
            .range([280, 0])
        const myLine = line()
            .x((value, index) => xScale(index))
            .y(value => yScale(value))
            .curve(curveCardinal)
        svg
            .selectAll('path')
            .data([data])
            .join('path')
            .attr('d', value => myLine(value))
            .attr('fill', 'none')
            .attr('stroke', 'lavender')
            .attr('stroke-width', '3px')
            .attr('width', '100%')
    }, [items])

    return (
        <div className={s.elem}>
            <svg viewBox={'0 -9 1240 300'}
                ref={svgRef}></svg>
        </div>
    )
})

[Иван Шульга]

Спасибо большое