Is It Bad To Use Props Value On React Hook?

I'm new in react hooks and I just don't see this on docs: const MyComponent = ({myProp}) => { const [myPropHook, setPropHook] = useState(myProp) ... } I'm wondering if this is

Solution 1:

The value you pass to useState is used as a starting value for the state variable. So, when your component props change, they will not affect the state variable you are using. The initial value would be the first props sent to the component and after that can be modified only using the setPropHook function.

So, in short, it is definitely a code smell to use props as initializers for useState because reading the code does not correctly convey what will actually happen.

Solution 2:

You don't see it much because it doesn't make a lot of sense in terms of how a React app should distribute its state.

If a prop value is set higher up the tree, it shouldn't be used as part of the separate state within a component. It makes sense to use prop values to determine the state of a component indirectly as in 'if the prop is this, then set the state to that', but not to directly copy the prop in to the initial value.

In other words, the internal state of a component (accessed via the useState and useReducer Hooks) should be determined by the component, not directly by the parent(s).

Solution 3:

Yes, this is bad. What you're doing is passing a prop to the state, and it is discouraged by many.

The React docs says that "using props to generate state often leads to duplication of “source of truth”, i.e. where the real data is.". The danger is that if the props is changed without the component being refreshed, the new prop value will never be displayed, because the initialization of state from props only runs when the component is first created.

The only exception would be to use the prop as a seed for an internally-controlled state. After several years of react development, I've never encountered such a case.

Further reading: React component initialize state from props (SO question) React Anti-Patterns: Props in Initial State (medium.com article) Why Setting Props as State in React.js is Blasphemy (blog post)

Solution 4:

If you are trying to receive a prop to that functional component, then yes, but not exactly like you have it written. So in the parent component you will have something like this:

constApp = () => {
  const [resource, setResource] = useState("posts");

and then there is a component inside the JSX like so:

constApp = () => {
  const [resource, setResource] = useState("posts");

  return (
    <div><div><buttononClick={() => setResource("posts")}>Posts</button><buttononClick={() => setResource("todos")}>Todos</button></div><ResourceListresource={resource} /></div>
  );
};

That ResourceList component has to be able to receive the props that the App component is passing to it. Inside a class-based component you would do {this.props.resource}, but in our case, where its a functional component using React hooks you want to write it like so:

constResourceList = (props) => {
  const [resources, setResources] = useState([]);

or via ES6 destructuring like so:

constResourceList = ({ resource }) => {
  const [resources, setResources] = useState([]);