Questions about how to reduce re-render

[yzbaoo]

The previous state is placed in the parent component.Will the state now be placed in the child components?
Won't it affect child component reuse?

[lishine]

Do you have an example?

[yzbaoo]

Do you have an example?
Thank you for reply.
Maybe I didn't understand how to use it, When I want to move one of the children, the other children do not update.
this is my code:

import { atom, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import produce from 'immer';
import React, { useCallback, useEffect, useRef } from 'react'

const initialState = [
  {
    x: 0,
    y: 0
  },
  {
    x: 100,
    y: 0
  },
  {
    x: 200,
    y: 0
  },
]
const state = atom({
  key: 'state',
  default: initialState
})

const List = () => {
  // const data = useRecoilValue(state);
  return (
    <div>
      {
        initialState.map((item, i) => {
          return(
            <ListItem key={i} idx={i}/>
          )
        })
      }
    </div>
  )
}

const ListItem = ({idx}) => {
  const [data, setData] = useRecoilState(state);
  const handleOnChange = (e) => {
    const copyData = produce(data, (draft) => {
      draft[idx].x = Number(e.target.value);
    })
    setData(copyData);
  }
  return (
    <div>
      <input type="number" value={data[idx].x} onChange={handleOnChange} />
    </div>
  )
}

const Canvas = () => {
  // const data = useRecoilValue(state);
  return (
    <div>
    {
      initialState.map((item, i) => (
       <CanvasItem key={i} idx={i}/>
      ))
    }
    </div>
  )
}

const CanvasItem = ({idx}) => {
  const style = {
    position:'absolute', 
    width: '100px', 
    height: '100px', 
    border: '1px solid black',
    borderRadius: '50%'
  }
  const [data, setData] = useRecoilState(state);

  const handleDrag = (e) => {
    const copyData = produce(data, (draft) => {
      draft[idx].x = e.pageX - 50;
      draft[idx].y = e.pageY - 50;
    })
    setData(copyData)
    e.preventDefault();
  }

  return (
    <div 
      style={{left: data[idx].x + 'px', top: data[idx].y + 'px', ...style}}
      draggable="true"
      onDrag={handleDrag}
      onDragOver={(e) => { e.preventDefault() }}>
    </div>
  )
}


export default () => {
  return (
    <div>
      <List></List>
      <Canvas></Canvas>
    </div>
  )
}

[yzbaoo]

it looks like this, can avoid brother re-render,but! Required in the child component dynamically creating atom.
Do you want it written like this？

import { atom, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import produce from 'immer';

const initialState = [
  {
    x: 0,
    y: 0
  },
  {
    x: 100,
    y: 0
  },
  {
    x: 200,
    y: 0
  },
]

// 在子组件中动态创建atom
const creatStateItem = (id, item) => {
  return atom({
    key: `state_${id}`,
    default: item
  })
}

const List = () => {
  return (
    <div>
      {
        initialState.map((item, i) => {
          return(
            <ListItem key={i} id={i} item={item}/>
          )
        })
      }
    </div>
  )
}

const ListItem = ({id, item}) => {
  const [data, setData] = useRecoilState(creatStateItem(id, item));
  const handleOnChange = (e) => {
    const copyData = produce(data, (draft) => {
      draft.x = Number(e.target.value);
    })
    setData(copyData);
  }
  return (
    <div>
      <input type="number" value={data.x} onChange={handleOnChange} />
    </div>
  )
}

const Canvas = () => {
  return (
    <div>
    {
      initialState.map((item, i) => (
       <CanvasItem key={i} id={i} item={item}/>
      ))
    }
    </div>
  )
}

const CanvasItem = ({id, item}) => {
  const style = {
    position:'absolute', 
    width: '100px', 
    height: '100px', 
    border: '1px solid black',
    borderRadius: '50%'
  }
  const [data, setData] = useRecoilState(creatStateItem(id, item));

  const handleDrag = (e) => {
    const copyData = produce(data, (draft) => {
      draft.x = e.pageX - 50;
      draft.y = e.pageY - 50;
    })
    setData(copyData)
    e.preventDefault();
  }

  return (
    <div 
      style={{left: data.x + 'px', top: data.y + 'px', ...style}}
      draggable="true"
      onDrag={handleDrag}
      onDragOver={(e) => { e.preventDefault() }}>
    </div>
  )
}


export default () => {
  return (
    <div>
      <List></List>
      <Canvas></Canvas>
    </div>
  )
}

[prbxr]

I want to help, but I don't understand what you are saying and don't have time to read long code.
Could you reduce this code to a few lines?
BTW you can format the code according to the language:
3backticksjs

[lishine]

this is me actually

[drarmstr]

Please note that you should not create atoms or selectors while rendering. Doing so would create a new atom with each render instead of re-using the same shared state with each render.

[yzbaoo]

thank you for reply.
yes i know, I forgot to wrap with memoize.
I mean is this notation recommended to prevent re-rendering of sibling components?
https://github.com/facebookexperimental/Recoil/issues/1751

[drarmstr]

No, even if you memoized it, by creating it in the render function you aren't sharing it with sibling components.

[yzbaoo]

thanks,so...
What to do with minimal granularity updates?

[yzbaoo]

No, even if you memoized it, by creating it in the render function you aren't sharing it with sibling components.
I did it by writing the following！but not cool at all.
Can't recoil do this automatically?

const initialState = [
  {
    x: 0,
    y: 0
  },
  {
    x: 100,
    y: 0
  },
  {
    x: 200,
    y: 0
  },
]
const creatItemAtom = (id, item) => {
  return atom({
    key: `item_${id}`,
    default: item
  })
}

const itemAtomList = initialState.map((v,i) => creatItemAtom(i, v))

[drarmstr]

For individual updates break up your state into separate atoms. When an atom or selector is updated all downstream subscribing components are updated. By using separate atoms you can control the granularity of updates.