React Stateful Components without classes
React supports this since version 16.8. From the documentation:
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
A simple example:
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
For an example of how to use lifecycles, check out useEffect
Writing Stateful component without using classes is definitely a choice made by several developers. I recommend to use 'recompose' which has nice and easy implementation to write stateful components without class, yet apply state, both local and from store. Here is an example:
import compose from 'recompose/compose'
import withState from 'recompose/withState'
import withProps from 'recompose/withProps'
Pure.js
function MyComponent(props) ({
local: { prop1, prop2 },
setProp1
})
return <div>{prop1}</div>
}
const defaultState = {
prop1: false,
prop2: false
}
const enhance = compose(
withState('local', 'updateLocal', defaultState),
withProps(({ local: { prop1, prop2 }, updateLocal }) => ({
setProp1: (newValue) => updateLocal(state => ({...state, prop1: newValue }))
})))
export default enhance(MyComponent)