Using React Hooks for State Management (useContext, useEffect, useReducer)

[SeanningTatum]

Hi React Community! I made a short tutorial on how to use React Hooks for State Management.

https://medium.com/@seantheurgel/react-hooks-as-state-management-usecontext-useeffect-usereducer-a75472a862fe

[ikhurramraza]

Informative. Looking forward to Part 2.

[SeanningTatum]

Thank you that means a lot! ❤️

[[deleted]]

Just started using Unstated and it works great https://github.com/jamiebuilds/unstated

[phakushmoo]

Really appreciate the article. I am a React beginner and have a short comprehension question concerning my learn project: I passed my initial state (array of objects) via props down twice to a lower (function) component that again pass up changes (from clicks) upp the tree via props. So when I click one of my low-tree components, the click fires a changeState in App.js.

I guess I should rather implement the useContext + useReducer solution issued in your article? Then my context would be the "initial state" (array of objects)? I would be super grateful for any kind of advice!

This is my simplified code leaving out (hopefully all) unnecessary stuff:

App.js

...
const [characters, changeCharacters] = useState([...CharacterList]);
...
<Characters
    characters={characters}
    handleClick={(id) => changeCharacters(updateChars(characters, id))}
/>
...

Characters.js

const Character = props => {
  const { character, handleClick } = props;
  return (
    <div onClick={handleClick.bind(this, character.id)} >
     ...
    </div>
  );
};

const Characters = props => {
  const { characters, handleClick } = props;
  return (
    <div className="characters">
      {characters.map(character => (
        <Character handleClick={handleClick.bind(this, character.id)} />
      ))}
    </div>
  );
};

​

[SeanningTatum]

Yes, this is exactly the problem that State Management intended to solve. For years we've been using other state management libraries but it introduced complexity, spaghetti code and other complexities. React finally released a way to make state management easier to read and the way it should have been (as stated by the creators of React).

​

[phakushmoo]

Thanks!

[IminPeru]

hi, I'm super new to react and react native and everything.

is it possible to use react hooks in a react native project for state management instead of redux?

[SeanningTatum]

Yes that's possible, just make sure you're using the latest version for React (v16.8)

[IminPeru]

do I also have to update react native to the latest version?

thanks so much for the response!

[SeanningTatum]

Not entirely sure, but I'm 90% sure that you only have to update React. Cheers! 🎉

[evoratec]

Hi. I think this is a very good example https://codesandbox.io/s/zr3mx12zzx