javascript - is it bad to use props value on react hook? - Stack Overflow

admin管理员组

文章数量:1296240

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 a good practice?

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 a good practice?

• javascript
• reactjs

Share Improve this question Follow asked Jul 1, 2019 at 16:06 gpbaculiogpbaculio 5,9681414 gold badges6868 silver badges112112 bronze badges 4

• In my opinion this is ok if you expect to use myProp only as initial value, otherwise I would suggest you use useRef() in case you need to update your local state when myProp changes. – alex kucksdorf Commented Jul 1, 2019 at 16:10
• There's a sensible use case for this. If for example you have a form and the props hold a server state of an object, you want state to hold what the user has currently typed in and props to only update once the server has updated the object state. – apokryfos Commented Jul 1, 2019 at 16:25
• @apokryfos In that example you should use the props until the internal state has been updated. – Will Jenkins Commented Jul 1, 2019 at 16:31
• @WillJenkins To clarify. The internal state is e.g. a database row on the server. The props hold the row data. The ponent state will hold user modifications on that data but the props should not be updated until the modified data goes to the server and the server updates the row. In that case not using the state means your form inputs will be read-only. this assumes there will be a submit button that triggers the server update as opposed to an update-as-you-type kind of box – apokryfos Commented Jul 1, 2019 at 16:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

The value you pass to useState is used as a starting value for the state variable. So, when your ponent props change, they will not affect the state variable you are using. The initial value would be the first props sent to the ponent 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.

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 ponent. It makes sense to use prop values to determine the state of a ponent 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 ponent (accessed via the useState and useReducer Hooks) should be determined by the ponent, not directly by the parent(s).

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 ponent being refreshed, the new prop value will never be displayed, because the initialization of state from props only runs when the ponent 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 ponent initialize state from props (SO question)
React Anti-Patterns: Props in Initial State (medium. article)
Why Setting Props as State in React.js is Blasphemy (blog post)

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

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

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

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

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

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

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

or via ES6 destructuring like so:

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

本文标签： javascriptis it bad to use props value on react hookStack Overflow