How would I use React Hooks, or at least one of them.

Image for post
Image for post

React team just announced React Hooks proposal just days ago. Still experimental and probably will change a little bit before becoming part of React’s API. But, already the main benefit of having Hooks is evident and wont change: Reuse logic, but in the most effective and simple way. just plain javascript.

Hooks rules and quirks have some people crying about it. I honestly don’t mind, it is a proposal, so community feedback will effectively make the React team improve on the final API (https://github.com/reactjs/rfcs/pull/68)

While creating web applications using React I found myself trying to do code reuse easier. I tried several approaches, mostly dependent of flux implementations, so reuse across them is complicated if not impossible. At the end I personally settled for a redux-style function construct that returns 3 objects: A reducer function, a createActions function and a initialState object.

Having an initial state is pretty straightforward, garantes your state machine starts in a correct state. The reducer function taken from redux is also very popular and simple concept

createActions provided a context returns a set of functions you can call to dispatch actions to the reducer and change the state.

This is an example of something very simple but personally I written the same code too many times. Just loading a resource from web using a HTTP request. Simple to test (even automate), flux and redux-like. So, familiar and reusable.

Helps keeps state local, by attaching this state construct via a HOC (I used react-setstate-connect) that wrapped my component with another component that passes state and actions as props. The reason I love React Hooks is now I don’t need HOCs or Render Props or Context to reuse similar logic. Just use useReducer a wonderful simple hook that does the job of providing state using a reducer function an a initial state object/value.

With useReducer you receive two objects back, the state object/value and the dispatch function. Dispatching plain objects is simple but I would like to provide a more encapsulated solution.

Custom Hooks

Custom Hooks are a way for you to create your own hooks and return whatever set of objects or functions your logic function construct needs to provide as API.

They can reuse the built in hooks or other custom hooks so composability wins again.

For my use case I built this custom hook that uses the useReducer hook internally.

It takes an object with the 3 elements my logic construct returns, creates a reducer out of it and instantiates the actions to this context so we can return only state and actions to whoever uses this hook.

Lets see an example.

Inside the function userState contains the logic state (loading, data, error) and userActions the function to load the data from whatever url we passed to the createUrlLoader function.

Several things a notice while using this approach:

  1. You can reuse the same logic and customize it every time to different uses via function params.

2. No more wrappers of wrappers or wrappers or render props (that IMHO didn’t feel like the React way of doing things), Component hierarchy is a lot cleaner now.

3. Array destructuring is actually very practical to return values from a hook. Yes, even custom. Both require you know the API of the hook to get returned data, so for me the cleaner approach is better.

// vsconst [myState, myActions] = useStateManager(...)

4. React Dev Tools will need a revamp. Right now they show a bunch of stranger props in the state part for each component with a hook.

5. Triggering actions after rendering now easier than ever with the useEffect hook. You can even provide the effects function as part of the actions you state construct returns.

I am only scratching the surface here, but, the benefits are clear to me. The sad part. Still not available. But soon…

Check the whole example here:

Happy hooking

Software Engineer @ Coalition Inc., Miami FL

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store