Component should be written as a pure function (react/prefer-stateless-function)
The rule should warn for components that are defined as a class or with React.createClass but could be safely written as pure stateless functions.
This should be considered as a problem:
1 2 3 4 5 | <span class="pl-k">class</span> <span class="pl-en">Foo</span> <span class="pl-k">extends</span> <span class="pl-en">React</span><span class="pl-k">.</span><span class="pl-smi">Component</span> { <span class="pl-en">render</span>() { <span class="pl-k"> return</span> <<span class="pl-ent">div</span>><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-v">this</span><span class="pl-k">.</span><span class="pl-smi">props</span><span class="pl-k">.</span><span class="pl-smi">foo</span></span><span class="pl-pse">}</span></<span class="pl-ent">div</span>>; } } |
This should not be considered as a problem:
1 2 3 | <span class="pl-k">const</span> <span class="pl-en">Foo</span> <span class="pl-k">=</span> <span class="pl-k">function</span> (<span class="pl-smi">props</span>) { <span class="pl-k"> return</span> <<span class="pl-ent">div</span>><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">props</span><span class="pl-k">.</span><span class="pl-smi">foo</span></span><span class="pl-pse">}</span></<span class="pl-ent">div</span>>; }; |
1 | <span class="pl-k">const</span> <span class="pl-smi">Foo</span><span class="pl-k"> =</span> ({<span class="pl-smi">foo</span>}) <span class="pl-k">=></span> <<span class="pl-ent">div</span>><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-smi">foo</span></span><span class="pl-pse">}</span></<span class="pl-ent">div</span>>; |
1 2 3 4 5 6 7 8 9 10 | <span class="pl-c">// using other lifecycle methods than render</span> <span class="pl-k">class</span> <span class="pl-en">Foo</span> <span class="pl-k">extends</span> <span class="pl-en">React</span><span class="pl-k">.</span><span class="pl-smi">Component</span> { <span class="pl-en">shouldComponentMount</span>() { <span class="pl-k"> return</span><span class="pl-smi"> fasle</span>; } <span class="pl-en">render</span>() { <span class="pl-k"> return</span> <<span class="pl-ent">div</span>><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-v">this</span><span class="pl-k">.</span><span class="pl-smi">props</span><span class="pl-k">.</span><span class="pl-smi">foo</span></span><span class="pl-pse">}</span></<span class="pl-ent">div</span>>; } } |
1 2 3 4 5 6 7 8 9 10 | <span class="pl-c">// using state</span> <span class="pl-k">class</span> <span class="pl-en">Foo</span> <span class="pl-k">extends</span> <span class="pl-en">React</span><span class="pl-k">.</span><span class="pl-smi">Component</span> { <span class="pl-en">changeState</span>() { <span class="pl-v"> this</span><span class="pl-k">.</span><span class="pl-en">setState</span>({<span class="pl-c1"><span class="pl-s">foo</span>:</span> <span class="pl-s"><span class="pl-pds">'</span>clicked<span class="pl-pds">'</span></span>}); } <span class="pl-en">render</span>() { <span class="pl-k"> return</span> <<span class="pl-ent">div</span> <span class="pl-e">onClick</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-v">this</span><span class="pl-k">.</span><span class="pl-smi">changeState</span><span class="pl-k">.</span><span class="pl-en">bind</span>(<span class="pl-v">this</span>)</span><span class="pl-pse">}</span>><span class="pl-pse">{</span><span class="pl-s1"><span class="pl-v">this</span><span class="pl-k">.</span><span class="pl-smi">state</span><span class="pl-k">.</span><span class="pl-smi">foo</span><span class="pl-k"> ||</span> <span class="pl-s"><span class="pl-pds">'</span>bar<span class="pl-pds">'</span></span></span><span class="pl-pse">}</span></<span class="pl-ent">div</span>>; } } |
