CopyPastor

Detecting plagiarism made easy.

Score: 1; Reported for: Exact paragraph match Open both answers

Possible Plagiarism

Plagiarized on 2019-04-12
by etarhan

Original Post

Original - Posted on 2015-06-25
by T.J. Crowder



            
Present in both answers; Present only in the new answer; Present only in the old answer;

As the React docs mention:
> setState() does not always immediately update the component. It may > batch or defer the update until later. This makes reading this.state > right after calling setState() a potential pitfall. Instead, use > componentDidUpdate or a setState callback (setState(updater, > callback)), either of which are guaranteed to fire after the update > has been applied.
So we can use the second argument of the setState to pass a callback where we execute our logic which depends on having the updated value of foo. However your initial question was whether the value of foo in `const { foo } = this.state;` and the value of foo in `this.setState(({ foo }) => { ... });` was the same.
In order check this we can compare executing a setState followed by this.state.foo and a setState followed by another setState (the second one will just log the value of foo instead of mutating it). Please refer to the following snippet:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component { constructor() { super(); this.state = { foo: 0, boo: 0 } } handleClickState = () => { this.setState(({foo}) => ({foo: foo+1})); this.setState(({foo}) => console.log("inside setState. foo: ", foo)); } handleClickSetState = () => { this.setState(({boo}) => ({boo: boo+1})); console.log("outside setState. boo: ", this.state.boo) } render() { return <React.Fragment> <button onClick={this.handleClickState}>Test state</button> <button onClick={this.handleClickSetState}>Test setState</button> </React.Fragment> } }
ReactDOM.render(<Example />, document.getElementById("root"));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
<!-- end snippet --> As we can see the state case lags behind by 1, which we would expect since setState is async (and we didn't use the second argument of setState). However the setState case shows that the correct value is always shown, even if we don't utilize the second argument callback in setState.
In conclusion `const { foo } = this.state;` will always give you the immediate value of foo, regardless of pending state merges, while `this.setState(({ foo }) => { ... });` seems like it will first finish pending updates before executing the callback, which means `this.setState(({ foo }) => { ... });` will always have the most recent value.
That's *property spread notation*. It was added in ES2018, but long-supported in React projects via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar&nbsp;&mdash; the good kind&nbsp;&mdash; for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component { render() { const { className, children } = this.props; return ( <div className={className}> {children} </div> ); } } ReactDOM.render( [ <Example className="first"> <span>Child in first</span> </Example>, <Example className="second" children={<span>Child in second</span>} /> ], document.getElementById("root") );
<!-- language: lang-css -->
.first { color: green; } .second { color: blue; }
<!-- language: lang-html -->
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object&nbsp;&mdash; which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => { return {foo: {...prevState.foo, a: "updated"}}; });
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = { foo: { a: 1, b: 2, c: 3 } }; console.log("original", obj.foo); // Creates a NEW object and assigns it to `obj.foo` obj.foo = {...obj.foo, a: "updated"}; console.log("updated", obj.foo);

<!-- language: lang-css -->
.as-console-wrapper { max-height: 100% !important; }
<!-- end snippet -->
[1]: https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx

        
Present in both answers; Present only in the new answer; Present only in the old answer;