This website stores cookies on your computer. These cookies are used to improve your experience. To find out more about the cookies we use, see our Privacy Policy.
Welcome to the new Applicaster Docs site. If you are looking for the old website or running on a non `Quick Brick` version go to developers.applicaster.com
React Hooks are functions which enhance your React components with different capabilities.
They were designed as a major update to the React API, allowing to stay away from class components and their limitations & pitfalls.
This means that some component features should be done differently, and sometimes it's not entirely intuitive to go from the component approach to the React Hooks approach. So we've created this document to help you use hooks. With the examples below, there should be no need for creating class components anymore !
Sometimes you have a slightly more complex state, which can hold multiple values, or require to update the state based on previous values.
This when you want to use the reducer hook.
Contexts allow to share values across different components, regardless of how many levels there are between the provider & the consumer of the context.
The creation of the context and the placement of the context provider is done the same way. But now, contexts can be consumed without requiring to use a decorator or a render prop function
When you want a certain call to be done when your component mounts. Don't forget the arguments to pass to your function, as a second argument to React.useEffect. You can even inject values from props or state. If you don't want to pass any argument to your onMount function, you should still call React.useEffect with an empty array as second argument. otherwise this effect will be call on each render (see below)
React components should be a pure function of props, but sometimes you have side effects. This one is really bad in the class component syntax, and will trigger warnings in the console. But if you really need to trigger a side effect every time a component is rendered, this can be achieved in a much more reliable and safer way with React Hooks.
for this, just leave the second argument of React.useEffect empty.
Before
classFooextendsReact.Component{
render(){
doSomething();// you shouldn't really
return<View/>;
}
}
with Hooks
functionFoo(){
React.useEffect(()=>{
doSomething();
});// side effect will run on each render cycle, and not only on mount
If you want to do something when your component unmouts, this is the way. Pay close attention to the syntax below: the block which runs when the component unmounts is the function returned from the argument passed to React.useEffect
You can have onMount and onUnmount together by mixing the two examples above. Since onUnmount is the return value of unMount it makes it very easy to share a variable between mount & unmount phases, as they belong to the same closure.
Before
classFooextendsReact.Component{
componentDidMount(){
doSomethingOnMount();
}
componentWillUnmount(){
doSomethingOnUnmount();
}
render(){
return<View/>;
}
}
with Hooks
functionFoo(){
React.useEffect(()=>{
doSomethingOnMount();
return()=>{
doSomethingOnUnmount();
};
},[]);
return<View/>;
}
componentDidUpdate, watching specific props / state#
When you want to run something when the component's props or state properties change.
Caution, just like componentDidUpdate, if you're not careful of what you do, you can end up with an infinite render loop.
Before
classFooextendsReact.Component{
componentDidUpdate(){
doSomething;
}
render(){
return<View/>;
}
}
with Hooks
functionFoo(props){
const[bar, setBar]=React.useState(true);
React.useEffect(()=>{
doSomething();
},[props, bar]);// you can pass anything you want, the effect function will be called whenever this input changes.
This can be used to tell React whether a component should re-render or not. The paradigm here for hooks is different - we're using the memoization feature from React.memo
PureComponent is a type of class component which will only update when props change, performing a shallow comparision of props (so non-primitive props will always trigger a re-render as they are compared references and not values).