Simplified Props vs State in React

Credit: drkvogel & Aftab22: https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react

One of the most confusing topics when first learning React is when to use state vs props. They seem to both do very similiar things, and many times look like they are used interchangeably. I will also be using specific examples to explain when to use state and when to use props.

What does Props mean?

In simply way “props” means properties nothing special about this word, Well right then What makes props special?

props are passed into the components

Here’s some example that provided by React https://reactjs.org/docs/thinking-in-react.html

class Hello extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
Hello.defaultProps = {
name: “Naufal”,
};

The line with <h1> Hello {this.props.name}</h1> creates property name with value Naufal

The Property passed down to the component , similiar how an argument passed to function. In easy way, we can write that method very very simple

As React introduced Functional Component

https://reactjs.org/docs/components-and-props.html

function Hello(props) {
return <h1>Hello {props.name}</h1>
}

Now, it might be clearer for those still confused.

Some of you might questioned, “is it props passed down from bottom to up? / is it props come from above?”

My answer is often, but not always. A component can also have default props, so if a prop isn’t passed through it can still be set.

We can make the defaultProps by calling defaultProps to the class as i declared before

So props can come from the parent, or can be set by the component itself.

Props should not changed!

You used be able to changed props through setProps & replaceProps. But, these have been deprecated. During lifecycle component props should not change

What is State?

Like props, state hold information about the component. However, the information that handled is very different

Im going to tell it on functional component style since, its best practice to learn React these days with functional style

https://reactjs.org/docs/hooks-intro.html

useState()

useState() hook allows you create and mange a state variable that can be a simple JavaScript primitive or an object. Typically this is how you would do it.

const [isAuthenticated, setIsAuthenticated] = useState(false)

This does two things.

  1. Your components can bind to the value of isAuthenticated.
  2. The only way to mutate the state and its binding is to call the function setIsAuthenticated()

For simple types, using const keyword protects the state from direct mutation. For object types, nothing stops you from updating the object’s properties. However, this will not have any effect on data binding. React will not recompute/re-render your component.

Well that’s just confusing.

It is, I know. But it makes sense — you can’t change props, but it’s pretty reasonable to want to do stuff to the data that a component receives. That’s where the state comes in.

Moving on brings us to our second difference…

useReducer()

useReducer() is used when you’d rather modify state via reducers and actions. An “actions up, data down” approach is recommended for managing complex state. This way, instead of sprinkling your state mutation logic throughout your component/container, it is tucked away inside a reducer. Here is a useReducer() example from the React site:

const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
throw new Error();
}
};
const increment = () => ({ type: "increment" });
const decrement = () => ({ type: "decrement" });function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(decrement())}>-</button>
</>
);
}

You modify your state via the dispatch() function. Anytime, the state changes, the component will refresh.

Should this Component have state?

“state” is optional. Since state increases complexity and reduces predictability, a Component without “state” is preferable. Even though you clearly can’t do without “state” in an interactive app, you should avoid having too many Stateful Components.

Also if you want to improve your state skill you can read a lot of React Cook Book by Dan Abramov here

Review

While props and state both hold information relating to the component, they are used differently and should be kept separate.

props contains the information set by the parent component (although defaults can be set) and should not be changed.

state contains “private” information for the component to initialise, change, and use on its own.

… props are a way of passing data from parent to child. … State is reserved only for interactivity, that is, data that changes over time.

– Facebook’s React Guide.

Software Engineer who got D score in Introduction to Programming at college 👨‍🎓🧑‍💻