├── .gitignore
├── LICENSE
├── README.md
├── index.js
├── main.js
├── package.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Michael Chan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # setstate
  2 | Set local state in a React.Component
  3 | 
  4 | [setstate on github](https://github.com/learnreact/setstate)
  5 | 
  6 | ## Installation
  7 | ```js
  8 | yarn add react setstate
  9 | ```
 10 | 
 11 | ## Example
 12 | setState keeps local state on an instance of `React.Component` or `React.PureComponent`.
 13 | 
 14 | In practice, it looks like so:
 15 | 
 16 | ```js
 17 | import React from "react";
 18 | import setState from "setstate";
 19 | 
 20 | class Counter extends React.Component {
 21 |   constructor() {
 22 |     super();
 23 |     this.state = { count: 0 };
 24 |   }
 25 | 
 26 |   render() {
 27 |     return (
 28 |       <div>
 29 |         <h1>{this.state.count}</h1>
 30 | 
 31 |         <button
 32 |           type="button"
 33 |           onClick={() => this.setState(({ count }) => ({ count: count + 1 }))}
 34 |         >+</button>
 35 | 
 36 |         <button
 37 |           type="button"
 38 |           onClick={() => this.setState(({ count }) => ({ count: count - 1 }))}
 39 |         >-</button>
 40 |       </div>
 41 |     );
 42 |   }
 43 | }
 44 | 
 45 | ```
 46 | 
 47 | ## Use in Create React App
 48 | `create-react-app` ships with  [`transform-class-properties`](https://babeljs.io/docs/plugins/transform-class-properties/) installed.
 49 | 
 50 | This can make working with local state faster and less ceremonious.
 51 | 
 52 | ```js
 53 | class Counter extends React.Component {
 54 |   // don't mess with the constructor to initialize state.
 55 | 
 56 |   state = { count: 0 }
 57 | 
 58 |   // create instance methods for better perf and re-use.
 59 | 
 60 |   increment = () => this.setState(({ count }) => ({ count: count + 1 }))
 61 |   decrement = () => this.setState(({ count }) => ({ count: count - 1 }))
 62 | 
 63 |   // the clean code you've always dreamed of.
 64 | 
 65 |   render() {
 66 |     return (
 67 |       <div>
 68 |         <h1>{this.state.count}</h1>
 69 | 
 70 |         <button type="button" onClick={this.increment}>+</button>
 71 |         <button type="button" onClick={this.decrement}>-</button>
 72 |       </div>
 73 |     );
 74 |   }
 75 | }
 76 | ```
 77 | 
 78 | ## API
 79 | `setstate` ships with 2 APIs.
 80 | I know that sounds complicated but it's not.
 81 | 
 82 | ### Object form
 83 | This is best used when setting a new value or blowing away a previous value:
 84 | 
 85 | ```js
 86 | this.setState({ name: "Michael" })
 87 | ```
 88 | 
 89 | Here's what it looks like in response to an input's change event.
 90 | 
 91 | ```js
 92 | // this.state.name gets replaced for every onChange
 93 | <input
 94 |   type="text"
 95 |   value={this.state.name}
 96 |   onChange={({ target }) => this.setState({ name: target.value })}
 97 | />
 98 | ```
 99 | 
100 | ### Function form
101 | This is best used when transitioning existing state (like the counter above).
102 | 
103 | ```js
104 | this.setState(previousState => ({ count: previousState.count + 1 }));
105 | ```
106 | 
107 | This is what it looks like in response to a button press:
108 | 
109 | ```js
110 | <button
111 |   type="button"
112 |   onClick={() =>
113 |     this.setState(previousState => ({ count: previousState.count + 1 }))
114 |   };
115 | ```
116 | 
117 | ### Optional callback
118 | `setState` is asynchronous.
119 | 
120 | You can use the optional callback to fire code after state is updated.
121 | 
122 | ```js
123 | this.setState(
124 |   { name: "chantastic" },
125 |   () => console.log("the new name is: ", this.state.name)
126 | )
127 | ```
128 | 
129 | This is handy but not as powerful as using `setstate` with a React component's lifecycle methods.
130 | 
131 | ### Works with React's lifecycle methods
132 | ```js
133 | class Counter extends React.Component {
134 |   // look, ma! no callbacks.
135 |   componentDidUpdate(prevProps, previousState) {
136 |     console.log("current state: ", this.state)
137 |     console.log("previous state: ", previousState)
138 |   }  
139 | 
140 |   render() { return <div>{this.state.count}</div> }
141 | }
142 | ```
143 | 
144 | ## Future
145 | I'm hopeful that this will end up in React proper.
146 | When it does, you'll be able to remove the `setstate` import and everything will work the same.
147 | 
148 | ## LICENSE
149 | MIT &reg; Michael Chan, 2017
150 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | (function (global, factory) {
 2 | 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 3 | 	typeof define === 'function' && define.amd ? define(factory) :
 4 | 	(global.setState = factory());
 5 | }(this, (function () { 'use strict';
 6 | 
 7 | var main = {};
 8 | 
 9 | return main;
10 | 
11 | })));
12 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | export default {};
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "setstate",
 3 |   "version": "1.0.2",
 4 |   "description": "Set local state in a React.Component",
 5 |   "main": "index.js",
 6 |   "repository": "https://github.com/learnreact/setstate.git",
 7 |   "author": "Michael Chan <mijoch@gmail.com>",
 8 |   "license": "MIT",
 9 |   "scripts": {
10 |     "build": "rollup main.js --format umd --name \"setState\" --output index.js"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | rollup@^0.45.2:
 6 |   version "0.45.2"
 7 |   resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.45.2.tgz#63a284c2b31234656f24e9e9717fabb6a7f0fa43"
 8 |   dependencies:
 9 |     source-map-support "^0.4.0"
10 | 
11 | source-map-support@^0.4.0:
12 |   version "0.4.15"
13 |   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
14 |   dependencies:
15 |     source-map "^0.5.6"
16 | 
17 | source-map@^0.5.6:
18 |   version "0.5.6"
19 |   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
20 | 


--------------------------------------------------------------------------------