Writing super reusable components

I got into programming at an early age and from using OOP based Java code to functional javascript code has taken me over 7 years, my interest has moved with the latest technology and so now I find myself writing React/Express on a daily basis building endless MERN stack applications and basing all my applications around JSON instead of HashMaps.

Whilst working for Barclays in Manchester I was introduced to the concept of reusability within a project through concepts of Multi Channel Applications (MCA). Barclays use React and React Native to build an ever expanding percentage of the front-end of their platform. Instead of rebuilding components that need the same logic and same function, with minor changes, should in-fact be a single component, modified with props or a Higher Order Component (where needed).

Utilising state and simple Javascript methods we can create powerful and highly configurable reusable components that can be used across a wide range of platforms and browsers, meaning you plan, develop and test once.

If we take a look at the below snippet you can see that in fact both components are very similar and can in fact be the same component.

const initial = {
firstName: '',
lastName: '',
info: ''
};
function exampleReducer(state, action) {
switch (action.type) {
case 'update_firstName':
return {
...state,
firstName: action.value,
};
case 'update_lastName':
return {
...state,
lastName: action.value,
};
case 'update_info':
return {
...state,
info: action.value,
};
default:
return {
...state,
};
}
}

export function ComponentOne() {
const [state, reactDispatch] = useReducer(exampleReducer, initial);
return (
<>
<div id="inputcontainer">
<label>First Name</label>
<input
label="firstName"
onChange={(e) => { reactDispatch({ type: 'update_firstName', value: e.target.value }); }}
/>
</div>
<div id="inputcontainer">
<label>Last Name</label>
<input
label="lastName"
onChange={(e) => { reactDispatch({ type: 'update_lastName', value: e.target.value }); }}
/>
</div>
<div id="inputcontainer">
<label>Info</label>
<input
label="info"
onChange={(e) => { reactDispatch({ type: 'update_info', value: e.target.value }); }}
/>
</div>
</>
);
}

As you can see here we have to create a separate input and label for the UI and a new state action and object. When you have a high number of fields or variables in a component, it can get quite big and messy and it’s much more simpler to break it down into individual components.

Once you’ve broken it down into individual components you will see that they are very alike in most ways and they can essentially be one component with minor prop changes to modify the UI that we see. We can also hook our backend up to using a key for each state action allowing us to use 1 action per type of action for a form (update, toggle, delete etc.).

And using a reusable component it looks like this

const initial = [
{
label: 'First Name',
key: 'firstName',
value: '',

},
{
label: 'Last Name',
key: 'lastName',
value: '',

},
{
label: 'First Name',
key: 'lastName',
value: '',
},
];

function exampleReducer(state, action) {
switch (action.type) {
case 'UPDATE':
return {
...state,
[action.key]: {
...state[action.key],
value: action.value,
},
};
default:
return {
...state,
};
}
}

export function component() {
const [state, dispatch] = useReducer(exampleReducer, initial);
return (
<>
{
state.map((field) => (
<ReusableComponent field={field} dispatch={dispatch} />
))
}
</>
);
}

export function ReusableComponent({ field, dispatch }) {
return (
<div id="inputcontainer">
<label>{field.label}</label>
<input
label={field.key}
onChange={(e) => { dispatch({ type: 'UPDATE', key: field.key, value: e.target.value }); }}
/>
</div>
);
}

While the reusable section may not look that much smaller, when you have 6 or 10 or 15 inputs, it allows you to quickly and simply create new components with minimal or maximum configuration depending on how you set the component up.

Why is this so good for dev teams?

Storybook

CTO at Templar Payments, but really I'm just a glorified Javascript developer.

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