[Documentation] Add information about `child.key` to `React.Children.map`
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 11.8k
- Forks
- 7.9k
- Merge medio
- 1 d 11 h
- PR fusionados (30 d)
- 11
Descripción
I just spent quite a while debugging a performance issue when reordering a large list of components, which were wrapped in React.Children.map.
The issue was the implementation of the wrapping component, which used the index as the key, which caused the entire list to re-render from scratch:
<div>
{React.Children.map(props.children, (child, index) => (
<div key={index} className='...'>{child}</div>
))}
</div>
The solution was to use child.key and pass it into the child-component, which then, in turn, made the memoization of the child components work as expected:
<div>
{React.Children.map(props.children, (child) => (
<div key={child.key} className='...'>{child}</div>
))}
</div>
I feel like this should be mentioned somewhere on the documentation page for React.Children.map, since I only figured out that this is possible at all after specifically searching for it and finding #10432.
I'm happy to update the docs in a PR if this gets the OK :)
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con la sección React.Children.map de la página de documentación de la API de React enlazada en el issue y revisa la discusión relacionada en el issue #10432. Añade información clara sobre child.key y su relevancia al envolver children, y verifica después que la documentación explique el uso previsto y la consideración de rendimiento.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react
- Área
- documentation
- Tipo de issue
- Documentación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Estado de actividad
- Estancado
- Claridad
- Bien especificado
- Aptitud para principiantes
- 55/100