React Stateful Function

Requires React version =< 16.8 to work

Implement react state into your function component in just One Step!

• Use useDidMount instead of componentDidMount
• Use useWillUnmount instead of componentWillUnmount
• Use useDidUpdate which is easier than of componentDidUpdate
• Initialize your state and update it inside any function component
• Very simple way to change state, just like Component setState !
• No hooks background needed at all, just import and use!

Instalation

npm i react-stateful-function - OR - yarn add react-stateful-function

Usage Example

import React from 'react';
 
import {
    useInitialState,
    useDidMount,
    useWillUnmount,
    useDidUpdate
}  from 'react-stateful-function';
 
 
const MyStatefulComponent = (props) => {
 
    const {
        state, // <= Access and Use state, just like this.state !
        setState, // <= Change and Update state, just like this.setState !
        resetState, // <= Reset state to its initial values
    } = useInitialState({ count: 0, toggle: false }); // <= Initialize state, just like this.state={} !
 
 
    const { count, toggle } = state; // Decounstrct for easier usage.
 
 
    useDidMount(() => {
 
        // ComponentDidMount replacement
 
    });
 
    useWillUnmount(() => {
 
        // ComponentWillUnmount replacement
 
    });
 
    useDidUpdate([count], () => {
 
        // ComponentDidUpdate replacement
        // Comparing values' changes within renders
        // Will be called if array values are changed
        // You can make more than one `useDidUpdate` hooks
        // Or Add new variables inside `values` array to call same action
 
    });
 
 
    // Component Render return
    return (
        <>
        {/* Your Component's JSX elements */}
        </>
    );
 
};
 
export default MyStatefulComponent;