Esto se llama una "desestructuración". En realidad, está pasando un objeto como argumento a la función, pero la desestructuración usa solo las propiedades nombradas del objeto.

 const destructuring = ({ used }) => console.log(used); const properties = { unused: 1, used: 2, }; destructuring(properties); // 2

Incluso puede usarlo para crear variables.

 const properties = { name: 'John Doe', age: 21, }; const { name, age } = properties; console.log(name, age); // John Doe 21

Soy un novato en React, pero creo que sí, items son un accesorio, y pasar {items} como argumento desestructura el objeto de props y, por lo tanto, la función usa solo los items de apoyo, para simplificar el código. De esta manera, puede usar items en el componente funcional, en lugar de props.items . Por ejemplo, probé una situación similar en el siguiente código. El uso de la desestructuración se ve así:

 const ListItem = ({content}) => ( <li>{content}</li> ); ... <ListItem key={index} content={content} />

Mientras que si props , se vería así:

 const ListItem = (props) => ( <li>{props.content}</li> ); ... <ListItem key={index} content={content} />

Entonces, para su ejemplo, usar accesorios se vería así:

 const List = (props) => ( <ul className="list"> {props.items.map(item => <ListItem item={item} />)} </ul> );

Mientras tanto, la desestructuración le permite simplificar items , en lugar de props.items , que es lo que se estaba haciendo en su código original:

 const List = ({ items }) => ( <ul className="list"> {items.map(item => <ListItem item={item} />)} </ul> );

¡Salud! --Omar