Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Nested React Hooks
// Engine
const React = {
index: 0,
state: [],
useEffect: (callback, dependencies) => {
const cachedIndex = React.index;
const hasChanged = dependencies !== React.state[cachedIndex];
if (dependencies === undefined || hasChanged) {
callback();
React.state[cachedIndex] = dependencies;
}
if (React.state[cachedIndex] === undefined) {
React.state[cachedIndex] = dependencies;
}
React.index++;
return () => console.log('unsubscribed effect')
},
useState: (defaultProp) => {
const cachedIndex = React.index;
if (!React.state[cachedIndex]) {
React.state[cachedIndex] = defaultProp;
}
const currentState = React.state[cachedIndex];
const currentSetter = newValue => {
React.state[cachedIndex] = newValue
};
React.index++;
return [currentState, currentSetter]
},
render: (Component) => {
const exampleProps = {
unit: "likes"
};
const compo = Component(exampleProps);
console.log("Render: ", compo.inner);
React.index = 0;
return compo;
}
}
const Component = props => {
[count, setCount] = React.useState(0);
[name, setName] = React.useState('Steve');
const exitThis = React.useEffect(() => {
console.log('Effect ran')
}, name)
return {
type: "div",
inner: `${count} ${props.unit} for ${name}`,
click: () => setCount(count + 1),
personArrived: (person) => setName(person),
unsubscribe: () => exitThis()
}
}
// Exercise 1
let App = React.render(Component) // Effect
App = React.render(Component) // No effect
App.click();
App = React.render(Component) // No effect
App.click();
App.personArrived("Peter");
App = React.render(Component) // Effect
App.unsubscribe();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.