Skip to content

Instantly share code, notes, and snippets.

@hswolff
Created October 26, 2018 00:56
Show Gist options
  • Save hswolff/e2660ed0e7f4fa5c8b195ac9562aaa71 to your computer and use it in GitHub Desktop.
Save hswolff/e2660ed0e7f4fa5c8b195ac9562aaa71 to your computer and use it in GitHub Desktop.
React Hooks: A Complete Introduction Source Code. Just use create-react-app!
import React from 'react';
import UseStateDemo from './UseStateDemo';
import UseEffectDemo from './UseEffectDemo';
import './App.css';
export default () => (
<div style={{ margin: '20px auto', padding: '20px', width: 200 }}>
<UseStateDemo />
<UseEffectDemo />
</div>
);
import React, { Component, useState, useEffect } from 'react';
const MyAPI = {
count: 0,
fakeFetch() {
return new Promise(resolve => {
setTimeout(() => {
this.count += 1;
resolve(this.count);
}, 1000);
});
},
subscribe(cb) {
this.intervalId = setInterval(() => {
this.count += 1;
cb(this.count);
}, 1000);
},
unsubscribe() {
clearInterval(this.intervalId);
this.reset();
},
reset() {
this.count = 0;
},
};
export default class UseEffectDemo extends Component {
state = {
project: 'Foo',
};
render() {
const { project } = this.state;
return (
<div>
<button
onClick={() =>
this.setState({
project: project === 'Foo' ? 'Bar' : 'Foo',
})
}
>
Change Project
</button>
<br />
{/* <UseEffectComponent project={project} /> */}
<UseEffectFunction project={project} />
</div>
);
}
}
class UseEffectComponent extends Component {
state = {
timeOnProject: 0,
};
componentDidMount() {
MyAPI.subscribe(timeOnProject => {
this.setState({ timeOnProject });
});
}
componentDidUpdate(prevProps) {
if (this.props.project !== prevProps.project) {
MyAPI.unsubscribe();
this.setState({ timeOnProject: 0 });
MyAPI.subscribe(timeOnProject => {
this.setState({ timeOnProject });
});
}
}
componentWillUnmount() {
MyAPI.unsubscribe();
}
render() {
const { project } = this.props;
const { timeOnProject } = this.state;
return (
<div>
<h1>Project: {project}</h1>
<h2>
Time on project: <br />
{timeOnProject}
</h2>
</div>
);
}
}
function UseEffectFunction(props) {
const { project } = props;
const [timeOnProject, setTimeOnProject] = useState(0);
useEffect(
() => {
MyAPI.subscribe(timeOnProject => {
setTimeOnProject(timeOnProject);
});
return () => {
MyAPI.unsubscribe();
setTimeOnProject(0);
};
},
[project]
);
return (
<div>
<h1>Project: {project}</h1>
<h2>
Time on project: <br />
{timeOnProject}
</h2>
</div>
);
}
import React, { Component, useState } from 'react';
const soMuchText =
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae sit beatae ipsa laborum ipsum placeat eius optio nisi alias! Voluptatibus quam, tenetur natus dolor laudantium deleniti adipisci sequi accusamus nemo!';
class ShowMoreComponent extends Component {
state = {
expanded: false,
};
render() {
const shortText = soMuchText.slice(0, 50);
const { expanded } = this.state;
return (
<div>
{expanded ? soMuchText : shortText}{' '}
<button
onClick={() =>
this.setState(state => ({ expanded: !state.expanded }))
}
>
{expanded ? 'Less' : 'More'}
</button>
</div>
);
}
}
export default function ShowMoreFunction() {
const shortText = soMuchText.slice(0, 50);
const [expanded, setExpanded] = useState(false);
const [count, incrementCount] = useState(0);
return (
<div>
{expanded ? soMuchText : shortText}{' '}
<button onClick={() => setExpanded(expanded => !expanded)}>
{expanded ? 'Less' : 'More'}
</button>
<br />
Current count: {count}
<button onClick={() => incrementCount(count + 1)}>Increment</button>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment