Larry Buffaloboy

10-25-2019

State vs Props in React

I am just beginning to wrap my head around state and props in react components. Admittedly it kept me from using react for a long time, but the react main concepts section in their documentation is written very well. So far all their documentation has been useful and easy to read. Reading through helped me understand the component lifestyle and instantiation.

React is built with components, all working together to create the web page. Each component is tied in with one another through parent/child relationships. When calling a child component you can pass in what are known as props or properties, variables passed to the component from the parent. The child component then is able to access those variables to render their content. State on the other hand is a variable created and managed by the component itself. State is locally scoped to the component, and when the state is updated, the component will update as well. The difference between state and props is that state cannot be accessed or modified by outside components.

Best Practices

A few best practices I have gathered, is that a component must never modify it’s own props. We want the component to render the same content each time the same props are used. We want to create as many ‘pure components’ as possible for performance and cleanliness. So when it comes to state, we only use it when we have to. When state is used we need to modify it directly using setState({ /* */ }), so that our component will update. We use ‘stateless’ components for mostly display components, and components that will not need to be altered.