1. 6
    Refactor React Components to be Stateless Functional Components
    6m 42s

Refactor React Components to be Stateless Functional Components

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet

We’ll continue the refactoring effort and break the remaining pieces of the application into their own stateless functional components and see how components can be used within other components.

Christiaan Westerbeek
Christiaan Westerbeek
~ 4 years ago

I appreciate the use of spreading the object properties as props into TodoItem. Of each primitive property, the child would receive a copy of the value. When I would pass stuff to a child in other frameworks, I'd always send the object. Then when the parent asynchronously maybe gets more properties or updates existing properties, the child would have access to those too. To accomplish the same here, instinctively I would have done this

{props.todos.map(todo => <TodoItem key={todo.id} todo={todo} /> )}

And in TodoItem use props.todo.etc instead of props.etc.

Would you like to share your thoughts about this approach?

Andy Van Slaars
Andy Van Slaarsinstructor
~ 4 years ago

Christiaan,

I think either way of passing props down is fine. I like the object spread when the props are small in number, or very specific to the component, so in something like TodoItem having todo object values available directly on props makes sense. For something that gets a larger number of props, or maybe receives multiple objects, then the approach where an object is passed in as a single property makes sense.

In terms of having a reference to an object so that updates are propagated down doesn't really apply here. If it's a state value passed down as a prop, updating that state through setState will automatically pass the new value down as a prop when render runs again. You don't need to worry in these cases about having an object reference.

Hope this helps.