react-stateful-function

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;